Background image. Repeat width?

Forum Moderators: not2easy

Message Too Old, No Replies

Background image. Repeat width?

How to get the image to repeat only for a certain width.

cynikalsam

2:08 am on Mar 6, 2005 (gmt 0)

My site is 717px wide and centered. I'm using a backgroung image that fades in color from the middle to the top and bottom. The image is 717px wide and 700px high.

Because the image looks the same from left to right, i thought i could save bandwidth by using a 2px wide, 700px high image, and repeat it horizontally for the width of my site. When i do that though, it overflows the width of my site.

How do i repeat an image (using css) to repeat only for 717px and stay centered?

createErrorMsg

4:23 am on Mar 6, 2005 (gmt 0)

A background image repeats only for the width of the element it acts as background for. So instead of setting the image as background on the <body> (just a guess), try setting it on whatever container element you use to keep your page content limited to 717px wide.

cEM

cynikalsam

4:46 am on Mar 6, 2005 (gmt 0)

The tables i use are 717px wide (max) and centered, but they dont span the height of the page, so it wouldnt be possible. The image needs to span the height and width of the entire page.

cynikalsam

4:47 am on Mar 6, 2005 (gmt 0)

//EDIT The image need to span the entire height of the page, and the width of the site layout.

MWpro

7:22 am on Mar 6, 2005 (gmt 0)

What if you wrap the whole table in a div and set the background on that?

cynikalsam

12:45 am on Mar 7, 2005 (gmt 0)

Thats a good idea. I can put the <div id="bgimage"> right after the <body> tag, and close it right before the </body> tag. That way it'll still validate as xHTML 1.0 Transitional :)

The problem i had with this, is the CSS code to layout the image. I want it to repeat horizontally, but stay fixed, so it doesnt move when you scroll and content moves over it.

The CSS code i used was


#bgimage {
background: url(http://www.mysite.com/bgimage.png) fixed repeat-x center bottom; width: 717px;
}

It stays centered, and limited to 717px, but it doesn't stay fixed. It just moves with the page..

sifredi

12:54 am on Mar 7, 2005 (gmt 0)

#bgimage {
background: url(http://www.mysite.com/bgimage.png) repeat-x fixed center bottom; width: 717px;
}

Fixed bg image like this code works in gecko browsers (mozilla, FF etc) but unfortunately not in IE/Windows. There are some hacks availible though, google them out.

cynikalsam

1:01 am on Mar 7, 2005 (gmt 0)

Ok i'll search, and if i find something that works, i'll post it in case anyone else has the same problem.

Thanks