WordPress.org

Ready to get started?Download WordPress

Forums

CSS for top, repeating-middle, bottom image to make up body background (2 posts)

  1. singhrt
    Member
    Posted 5 years ago #

    I'm having a spot of bother with CSS, and was wondering if anybody could help.

    I want one top image, a repeating middle image, and one bottom image, to make up the 'body' background of a website.

    This website says it's possible, so following their logic, I would put...

    body {
    background-image: url("top.png"), url("middle.png"), url("bottom.png");
    background-position: top center, middle center, bottom center;
    }

    The problem is, it doesn't work. I've tried Firefox, Safari and IE, and doesn't work in any.

    Are there any CSS wizards out there who could help me with my predicament?

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    What you're suggesting isn't currently possible. Many browsers don't support CSS3 and those that do only offer patchy support.

    Right now, all you can do is divide the page into two blocks using something like <div id="foo"> and <div id="foo2">. Then apply one image to your body background and the other two to each of the divs.

    You might be able to get away with just one <div> block and use the <html> element to as a container for one of your background images but I've not tried that myself.

Topic Closed

This topic has been closed to new replies.

About this Topic