Tue, 2004-06-08 11:40
I want to use a background in my <body> element, to give the effect of two columns (set up as right and left divs), which stretch the length of the page, no matter how much (or rather, how little) content is in each div.
I've written it as follows:
background: #C7977A url(http://www.neverever.co.uk/wild/images/loop.gif) repeat-y fixed 67%;
I've set the width of the left div to 67%, and the right div just takes up the remaining space (haven't set a width or float). Neither div has background set, so the left div takes the background of the body, and the right div takes the background of the background-image set in the body tag.
Unfortunately, it doesn't work, the background starts a short way into the page.
Any ideas?
Tue, 2004-06-08 11:54
#1
background-position
Have you set up the body with padding:0; margin:0; ?
Tue, 2004-06-08 11:58
#2
background-position
yes, the problems appears to be that the position attribute means the position of the center of the background image, and as I've made a very wide background image (to accommodate people viewing site with graphics cards set to hi-res), it doesn't work too well. I need to set the background position by the left side of the image, but that appears to be impossible...
Any more ideas?
Tue, 2004-06-08 12:04
#3
background-position
The background image position should refer to the top left corner of the image.
So ~
body {background: #fff url(background.gif) no-repeat top left;}
should place it in the top left corner of the browser window.
Tue, 2004-06-08 12:06
#4
background-position
OK, how do I place the image 67% of the way across the screen, because
background: #fff url(images/loop.gif) repeat-y fixed 67%;
doesn't seem to work,
thanks for the help,
Tue, 2004-06-08 12:09
#5
background-position
Try
background-position: 67% 0%;
Tue, 2004-06-08 12:13
#6
background-position
no luck...
http://www.neverever.co.uk/wild/
It might be impossible, but it seems so easy it shouldn't be!
From http://members.lycos.co.uk/lawnet/CSS1D.HTM, note second paragraph
"This states the initial position of the background image. E.g. BODY {background-position: 12cm 100%}, where the lengths refer to the offset of the top left hand corner of the image from the element's padding's top left corner (the first distance is horizontal, the second vertical).
55% 67% means that the point 55% across and 67% down the image is placed 55% across and 67% down from the element's padding's top left corner. If only one percentage or distance is supplied, it refers to the horizontal value, with the vertical position set to 50%"
Tue, 2004-06-08 12:22
#7
background-position
it appears the guy was right (for IE and Moz), made a bg image that was 3000px wide, with the change occurring at the 2000px mark, that should cope with most screen resolutions!
Cheers for the help Stu (now to fix those thumbnails on the right side of the page in Moz)