7 replies [Last post]
neverever
Offline
newbie
Last seen: 18 years 4 weeks ago
Joined: 2004-06-08
Posts: 5
Points: 0

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?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

background-position

Have you set up the body with padding:0; margin:0; ?

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

neverever
Offline
newbie
Last seen: 18 years 4 weeks ago
Joined: 2004-06-08
Posts: 5
Points: 0

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?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

neverever
Offline
newbie
Last seen: 18 years 4 weeks ago
Joined: 2004-06-08
Posts: 5
Points: 0

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,

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

background-position

Try

background-position: 67% 0%;

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

neverever
Offline
newbie
Last seen: 18 years 4 weeks ago
Joined: 2004-06-08
Posts: 5
Points: 0

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%"

neverever
Offline
newbie
Last seen: 18 years 4 weeks ago
Joined: 2004-06-08
Posts: 5
Points: 0

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)