CODEWITHSUNDEEP
cssbackgroundbackground-image
Òirottiv Gargiuolo
Òirottiv Gargiuolo

Reputation: 3

background-image doesn't load

I have a problem with the background-image property. I want to insert the image of a film roll in the background of the div scena, but background-image:url(img/rullino.png); doesn't show anything.

When I write it inline with Firebug on Mozilla, then it works.

Someone understand why this happens? 

/* tag */

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

p {
	word-wrap:break-word;
}

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

.sections{
	min-height: 100%;
}

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

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

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

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

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

#film{
	height:100%;
}

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

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

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

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

Upvotes: 0

Views: 1957

Answers (1)

socialpiranha
socialpiranha

Reputation: 172

I tried your code with this image of a puppy, and it worked for me : "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 it seems like it could be your image path. Rather than "img/rullino.png", try "./img/rullino.png" or an absolute path to your image, so that it checks your current folder for the image.

Also, just a tip for readability + cleaner CSS - If you want the image as the bg of all the divs with the class '.scena' you'll only need to do this:

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

Hope this helps!

Upvotes: 1

Related Questions