CODEWITHSUNDEEP
css
Captain Lightning
Captain Lightning

Reputation: 10753

Multiple backgrounds with CSS3

At the moment, I'm wresting with a problem where whenever I try to use multiple backgrounds, it either only shows one or none at all. When I add multiple 'background-repeat' properties to go along with each image,it shows nothing at all. When I use only one, it only shows the first listed background.

Here's my code:

box-shadow: 0 0 41px 7px black;
background-image: url(images/journalist/header_bg.gif) no-repeat, url(images/journalist/body_top.gif) no-repeat, url(images/journalist/body_tile.gif) repeat-y;
background-size: 100%;
margin: auto auto;
padding: 20px;
text-align: left;

You can see where I am attempting to apply it here.

Upvotes: 0

Views: 162

Answers (1)

Lea Verou
Lea Verou

Reputation: 23887

It's hard to say without seeing a fiddle or something, but your code uses background-image but also specifies background-positions, which is invalid, so the whole declaration gets dropped.

As to why it shows only one when you fix this, I can only guess: Maybe the topmost image (the first one) is hiding the rest? Maybe the rest of the images can't be found?

Upvotes: 1

Related Questions