CSS Help

rts · Thu 21 May, 2009 17.26

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

Code: Select all

div {
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?

cdd · Thu 21 May, 2009 19.05

That article seems to suggest this is part of CSS3 meaning it won't work with most current browsers.

Your best bet is probably to make the background image the one that occupies the middle bit of the page, and use images with absolute positioning, and z-indexes (i.e. a stack order) below everything else, for the top and bottom bits, if that makes any sense.

martindtanderson · Thu 21 May, 2009 19.43

You could have the body backing image being the repeating one, with a div at the bottom and a div at the top with backing images set for them

rts · Thu 21 May, 2009 19.54

Good points chaps. I've gone with Martin's suggestion, also the same as Rob Palmers on Twitter, as it provides what I want, and makes it workable on most browsers as cdd touched upon.

rts · Fri 22 May, 2009 14.01

I'm now having a problem with

Code: Select all

margin : 0 auto;

The site aligns centered in Firefox etc, but not in Explorer. I've done some Googling but can't figure it out. I don't want to put margin-left: 100px as surely this would depend on how big the monitor is of the person viewing.

Any ideas?

Andrew Wood · Fri 22 May, 2009 22.57

Have you tried setting a width for the block you want centred?

Code: Select all

#wrap{margin: 0 auto;
      padding: 0px 20px;
      border-left: solid 1px;
      border-right: solid 1px;
      width: 946px;
}

For me, without the width in the #wrap section, the corresponding div doesn't get centred properly.

dosxuk · Sat 23 May, 2009 15.40

Also make sure you have a valid doctype in the header of the file. Explorer falls back to IE6 rendering / box model if it doesn't know it's a standards compliant page.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">

rts · Tue 26 May, 2009 18.47

Thanks for the help/advice. It's helped solve a few problems.