Support » Themes and Templates » Multiple background images – CSS3

  • lmw

    (@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: http://ohlalaleslesters.be/milo/the-volcano/

    and my css is:
    `#wrapper {
    background-image: url(“http://ohlalaleslesters.be/wp-content/themes/ohlatwentyeleven/images/bg_inside.png”), url(“http://ohlalaleslesters.be/wp-content/themes/ohlatwentyeleven/images/sea.png”);
    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

    (@julialasarte)

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

    #wrapper {
       background-image: url("http://ohlalaleslesters.be/wp-content/themes/ohlatwentyeleven/images/sea.png"),  url("http://ohlalaleslesters.be/wp-content/themes/ohlatwentyeleven/images/bg_inside.png");
       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.

    lmw

    (@lmw)

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

    lmw

    (@lmw)

    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. http://ohlalaleslesters.be/category/videos/).

    And on a single post page(e.g. http://ohlalaleslesters.be/milo/the-volcano/), 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.