Support » Themes and Templates » CSS for top, repeating-middle, bottom image to make up body background

  • 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?

Viewing 1 replies (of 1 total)
  • 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.

Viewing 1 replies (of 1 total)
  • The topic ‘CSS for top, repeating-middle, bottom image to make up body background’ is closed to new replies.