2016-04-10 11 views
0

Ich habe ein Problem mit der background-image -Eigenschaft. Ich möchte das Bild einer Filmrolle im Hintergrund der divscena einfügen, aber background-image:url(img/rullino.png); zeigt nichts.background-image lädt nicht

Wenn ich es inline mit Firebug auf Mozilla schreibe, dann funktioniert es.

Jemand versteht, warum das passiert?

/* tag */ 
 

 
body,html{ 
 
\t background-color: grey; 
 
\t font-family: 'Existence Light', arial, sans-serif; 
 
\t font-size: 1.8em; 
 
\t height:100%; 
 
} 
 

 
p { 
 
\t word-wrap:break-word; 
 
} 
 

 
/* ======= Generale sezioni ======= */ 
 

 
.sections{ 
 
\t min-height: 100%; 
 
} 
 

 
/* ======= Entry-section ======= */ 
 

 
#entry-logo img{ 
 
\t margin: 10% 0 0; 
 
} 
 

 
#entry-section #go-down{ 
 
\t margin-top: 9%; 
 
\t text-align: center; 
 
} 
 

 
#entry-section i{ 
 
\t content:"\f078"; 
 
\t color:white; 
 
} 
 

 
/* ======= film-section ======= */ 
 

 
#film{ 
 
\t height:100%; 
 
} 
 

 
#film > .container{ 
 
\t height:100%; 
 
\t padding:0; 
 
\t margin:0; 
 
\t width:100%; 
 
} 
 

 
.container > #rullino { 
 
\t height:20%; 
 
\t background-color:red; 
 
} 
 

 
body #film .container #rullino .scena { 
 
\t background-image: url(img/rullino.png); 
 
\t background-color: #00ff00; 
 
\t background-repeat: no-repeat; 
 
\t height:100%; 
 
\t width:15%; 
 
\t float:left; 
 
} 
 

 
#rullino img{ 
 
\t max-height:70%; 
 
}
<body> 
 
\t \t \t <section id="entry-section" class="sections"> 
 
\t \t \t \t <div class="container"> 
 
\t \t \t \t \t <div id="entry-logo"> 
 
\t \t \t \t \t \t <img src="img/logo.png" width="100%" alt="Un Autre Chien Andalou"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="go-down"> 
 
\t \t \t \t \t \t <i class="fa fa-chevron-down"></i> 
 
\t \t \t \t \t </div> 
 
\t \t \t </section> 
 
\t \t \t <section id="film" class="sections"> 
 
\t \t \t \t <div class="container"> 
 
\t \t \t \t \t <div id="rullino"> 
 
\t \t \t \t \t \t <div id="scena1" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena1</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena2" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena2</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena3" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena3</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena4" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena4</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id="scena5" class="scena"> 
 
\t \t \t \t \t \t \t <p>scena5</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div>

+0

Sind Ihre HTML- und CSS-Datei im selben Ordner? – dafilipaj

Antwort

1

habe ich versucht, den Code mit diesem Bild eines Welpen, und es funktionierte für mich: "http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8.CB312176604.jpg".

So scheint es könnte Ihr Bildpfad sein. Versuchen Sie statt "img/rullino.png" "./img/rullino.png" oder einen absoluten Pfad zu Ihrem Bild, damit Ihr aktueller Ordner auf das Bild überprüft wird.

Auch nur ein Tipp für die Lesbarkeit + Reiniger CSS - Wenn Sie das Bild als bg aller divs mit der Klasse wollen ‚.scena‘ Du nur dies tun müssen:

.scena { 
    background-image: url(img/rullino.png); 
    background-color: #00ff00; 
    background-repeat: no-repeat; 
    height:100%; 
    width:15%; 
    float:left; 
} 

Hoffe, das hilft!

+0

Nichts! Ich habe das gleiche mit dem Welpen gemacht und dann funktioniert es, aber mit dem Weg funktioniert es nicht. Ich habe versucht mit verschiedenen Wegen aber nichts. Wenn ich den Code in Firebug inline schreibe, funktioniert es. Ich bin sprachlos. –

+0

Habe es einfach mit 'background-image: url (../ img/rullino.png) 'probiert und es hat geklappt! @ nreddy216 es war ein Problem des Pfades, wie du gesagt hast: Das Bild und die CSS leben in Unterverzeichnissen und brauchen '(../ img)' im Pfad. Tschüss und danke –