CSS Multiple background images

  • Resolved jayjerome

    (@jayjerome)


    17 years, 11 months ago

    I want to place two background images on my blog theme’s main page.

    According to the w3 orgs’s specifications (https://www.w3.org/TR/css3-background/#layering) you can do that by using the ‘background-position’ property, and using ‘multiple comma-separated values.’ They give various examples of the syntax, including this:

    body { background-image: url(“marble.svg”) }
    p { background-image: none }
    div { background-image: url(tl.png), url(tr.png) }

    and this:
    background-image: url(flower.png), url(ball.png), url(grass1.png);
    background-position: center center, 20% 80%, top left;
    background-origin: border, content, border;
    background-repeat: repeat-x, repeat-y, repeat-y, repeat-x, repeat-y;

    but when I try to use the code in my style sheet like this:

    body {
    background-image: url(‘images/deco-bar.jpg’), url(‘images/jukebox.gif’);
    }

    It doesn’t work. No images show, neither one. The background-image works ok with a single image, but not with two.

    Adding ‘background-position’ and ‘background-repeat’ etc, makes no difference.

    Any suggestion why this isn’t working?

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

  • Well, css3 is pie in the sky right now. Try it again in 5 years maybe…. none of the browsers support much of it at all as yet.

    Now, you CAN do this the normal way, by layering the graphics on various <div> tags, like main, container, column – whatever your theme includes. It’s not always really simple to figure out how to get all the pieces-parts to show properly; the one thing I do to help is to set all the background COLORS to “transparent” while getting the graphics to show in their proper relationships, then add the color elements back one at a time – layering this way means that occasionally a color will cover the underlying graphic.

    To see an example, take a look at one of my test blogs, https://vkaryl.net/ExMachina . This one is 4 graphics, two in the header and two different ones in the side backgrounds.

    Thread Starter jayjerome

    (@jayjerome)

    thanks for the feedback, vkaryl–
    i found a solution with <div> configurations, using your ‘transparent’ suggestion…

    your blog sites are attractive… the ‘whispers’ especially nice

    Thanks. Appreciate the feedback…. whispers right now isn’t one of my own themes, though – the kudos for that one belong to Sadish Bala, who posts here to help out sometimes too.

    And very glad it helped. I too wish css3 was fully usable RIGHT NOW. *sigh*

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