Support » Themes and Templates » Multiple background images – CSS3

  • lmw


    I’m going nuts here…

    I know in CSS3 you can apply multiple background images to a div (and most browsers support this now). But when I try it, only one background image shows. What an earth am I doing wrong? I have searched the forum, to no avail.

    The page is:

    and my css is:
    `#wrapper {
    background-image: url(“”), url(“”);
    background-repeat: repeat, repeat-x;
    background-position: 0 0, bottom center;
    } `

    I put absolute links in cos I saw that worked for someone else! (But not me). Have tried shorthand declaration too….

    I’m using Twenty Eleven (although I’m not sure why that would matter).

    Please help!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • popper


    You have two problems. First, the images should be inverted:

    #wrapper {
       background-image: url(""),  url("");
       background-repeat: repeat-x, repeat;
       background-position: center bottom, 0,0;

    and even if that is right the footer is inside #wrapper and it’s hiding your second image behind it.



    Thanks popper, you rock! Sometimes I can’t see the wood for the trees… 🙁



    Hmmm… but why do I need to clear the left float on #primary to make the background show?

    And if I clear the float, then #secondary will be in the wrong place (e.g.

    And on a single post page(e.g., I get a weird grey line that looks like it might be something to do with #secondary, but isn’t??

    Perplexed……… 🙁

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Multiple background images – CSS3’ is closed to new replies.