Mein CSS-Hintergrundbild wird nicht angezeigt

-1

Ich verwende die folgenden CSS, um ein Hintergrundbild auf einer Seite anzuzeigen. Alles, was ich bekomme, ist stattdessen ein weißer Hintergrund. Ich habe gegoogelt, aber kann nicht herausfinden, was mit dem, was ich mache, falsch ist ... irgendwelche Vorschläge?Mein CSS-Hintergrundbild wird nicht angezeigt

CSS:

#home_body { 
    background: url(/resources/images/main_tree.png) no-repeat; 
}

Html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Welcome</title> 
    <link rel="stylesheet" type="text/css" href="resources/css/main.css"> 
</head> 
<body id="home_body"> 
    <div> 
     <h1 class="main_heading">Welcome</h1> 
    </div> 

    <div id="home_nav"> 
     <nav> 
      <ul id="main_menu"> 
       <li><a href="gv_shop.html">Shop</a></li> 
       <li><a href="gv_gallery.html">Gallery</a></li> 
       <li><a href="gv_about.html">About Us</a></li> 
       <li><a href="gv_news.html">News</a></li> 
       <li><a href="gv_contact.html">Contact Us</a></li> 
      </ul> 
     </nav> 
    </div> 
</body> 
</html>

Quelle

2016-04-24 Totem

Fragen Code Hilfe suchen müssen den kürzesten Code enthalten notwendig, es zu reproduzieren ** in der Frage selbst ** vorzugsweise in einem [** Stapel Snippet * *] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Siehe [** So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) –

Was ist Ihr HTML-Code? hast du einen fehler auf der konsole (nicht zum beispiel das png) – AlainIb

Ist die URL relativ zu deiner CSS-Datei? Was sagt Ihre Netzwerkkonsole (F12) zum geladenen Bild? Wird es korrekt geladen? – GolezTrol

1) anzuzeigen Wenn Sie die Bild-URL kopieren und einfügen in Ihre Browser zeigt das Bild an?

2) Geben Sie die CSS-Klassen-Bildreferenz in einfache Anführungszeichen.

3) Überprüfen Sie die Referenzierung, sind Referenzierung Sie das Bild von der Wurzel als <root>/resources/images/main_tree.png in der CSS, aber die HTML-Seite wird für eine relative resources/css/main.css CSS-Datei zu fragen, alles sollte root verwiesen (so alle Adressen auf dem sein Seite sollte mit einem / beginnen).

4) Überprüfen Sie, dass keine anderen Klassen oder CSS-Regeln auf das Element <body> angewendet werden und dass Sie Ihren Hintergrund "überschreiben".

5) Versuchen Sie, background-image anstelle der Hintergrund Kurzschrift zu verwenden. Aber denken Sie daran, die no-repeat in eine neue Eigenschaft zu setzen: -

background-image: url('/resources/images/main_tree.png'); 
background-repeat: no-repeat;

Quelle

2016-04-24 19:47:47 Martin

Dies beinhaltet die Lösung und deckt so ziemlich alle Basen, danke. – Totem

keine Sorgen, @Totem froh, dass Sie es sortiert haben. Es ist praktisch, Dinge wie Firebug oder Google Chrome Inspector zu verwenden, um eine Live-Bewertung der CSS-Regeln auf der Seite durchzuführen, um festzustellen, wo in der Kette die Dinge nicht funktionieren. – Martin

#home_body { 
background-image: url(/resources/images/main_tree.png) no-repeat;}

CSS-Klasse ändern Bild

Quelle

2016-04-24 19:39:55 Oshink

das ist keine Klasse, das ist eine Eigenschaft. – Martin

Ich habe das versucht, es scheint keinen Unterschied zu machen. – Totem

Hintergrundbild sollte nicht die Wiederholungseigenschaft zeigen. – Martin

Mein CSS-Hintergrundbild wird nicht angezeigt

Antwort

Verwandte Themen