CODEWITHSUNDEEP
css
Jerome
Jerome

Reputation: 6217

CSS layered backgrounds

Attempting to have three backgrounds with various z indices is resulting in only one layer being shown.

This jsfiddle has the relevant code and examples (minus the huge foundation css file... the behaviour is unaltered without it).

the classes that are failing are

skyline

and

#footer_container

whereas #header_container is running properly.

Upvotes: 0

Views: 83

Answers (1)

The Spirit of Gordon Bombay
The Spirit of Gordon Bombay

Reputation: 317

I've updated your fiddle here.

#footer-container wasn't displaying its background image because of your CSS syntax. Since you combined both the background image URL and no-repeat, you would need to use the background shorthand rather than the background-image property.

A great way to check this sort of thing is to inspect your element with your browser (in Chrome: Right Click > Inspect Element) and find the element that isn't displaying properly. You'd notice that the background image property of your #footer-container div was being literally crossed out by Chrome because of a syntax error.

There was also a bit of a syntax problem in your .skyline class. First, both your body and the inner div have a class of .skyline. This is kind of confusing so you should remove it or be more specific in your CSS, e.g. with p.skyline, div.skyline, etc. As you've got it currently written, both your body and that .skyline div will get the background image. You also didn't include a closing </body> tag. I'm assuming you don't want the background image on both that div and the body, so I removed your body tag in the updated fiddle.

Also, in your .skyline css, you have both height: 546 and height: auto. First of all, height in CSS should have a specific value (e.g. px, em, %). For an <img src="img.jpg" height="546" />, however, simply putting "546" as its height would be fine. Second, you should only have one height value per class.

The skyline problem itself is that you didn't close your curly bracket on line 126, so no styling at all was applied to .skyline. Once it's closed, there's still a problem. It has no width. So let's set it to 100%. Still nada. This is because .skyline's parent div#container also is widthless. So let's toss a 100% width at it too. Then we're in business.

A good text editor that highlights syntax errors could help you out a bunch, especially when you're just starting out.

Upvotes: 1

Related Questions