WordPress.org

Ready to get started?Download WordPress

Forums

Multiple background images - CSS3 (4 posts)

  1. lmw
    Member
    Posted 2 years ago #

    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!!

  2. popper
    Member
    Posted 2 years ago #

    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.

  3. lmw
    Member
    Posted 2 years ago #

    Thanks popper, you rock! Sometimes I can't see the wood for the trees... :-(

  4. lmw
    Member
    Posted 2 years ago #

    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......... :-(

Topic Closed

This topic has been closed to new replies.

About this Topic