Page 1 of 1
CSS Help
Posted: Thu 21 May, 2009 17.26
by rts
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?
Re: Multiple CSS backgrounds
Posted: Thu 21 May, 2009 19.05
by cdd
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.
Re: Multiple CSS backgrounds
Posted: Thu 21 May, 2009 19.43
by martindtanderson
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
Re: Multiple CSS backgrounds
Posted: Thu 21 May, 2009 19.54
by rts
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.
Re: CSS Help
Posted: Fri 22 May, 2009 14.01
by rts
I'm now having a problem with
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?
Re: CSS Help
Posted: Fri 22 May, 2009 22.57
by Andrew Wood
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.
Re: CSS Help
Posted: Sat 23 May, 2009 15.40
by dosxuk
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">
Re: CSS Help
Posted: Tue 26 May, 2009 18.47
by rts
Thanks for the help/advice. It's helped solve a few problems.