Centering a div so it lines up consistently w/image behind?

HTML & CSS
1

I have a centered wrapper with a background image that partially flows over to the main bg…

The problem is that the centering judders around between 1 pixel depending on whether the window size is an odd or even number of pixels (I assume that’s what’s going on… it makes sense for that to happen).

I am just not sure if there’s any way for the centered div to always line up precisely with the main background based on the nature of centering things.

the code i have is like so:


body {
background: #e1e1e1 url(images/bggrad.gif) repeat-x top;
}

#bg {
	background: url(images/bg.jpg) top no-repeat;	
	min-height: 100%;
	width: 100%;
	overflow: hidden;
	
}
#wrapper {
	margin: 108px auto 20px;
	width: 809px;
	background: #FFF url(images/bg.jpg) -172px -108px no-repeat;
	overflow:visible;}

Hope that made sense!

2

Hi,

The FAQ documents this problem and has a couple of fixes that you may want to try first.

The sure way to fix it is not to use the body element but use a page wrapper of appropriate width to hold the background image but does depend on size and on how things are matching up.

If the faq doesn’t help then post a link so we can see what’s what :slight_smile:

3

cool i’ll have a look into that… thanks!
the faq mentions this happening only in IE though for me it is happening in firefox but it seems to be slightly different as i’m not really tiling anything… although maybe I am. I don’t have the site online as of now but if i can’t get it working with that I’ll pop it up :slight_smile:

4

You have a tiling image on teh <body> :).

And try removing the image on the <body> and using the fix described in the FAQ before we even try debugging :). That’s probably it.

5

ok right… the tiling image is just a bit of a gradient tiling horizontally…
the problem i’m having is with the image on the #bg and the #wrapper, which I want to line up, but jogs back and forth when i re-size the window in any browser… neither are on the body element. I did try adding padding to the body anyway but it didn’t affect anything…
here is the culprit so you can see what I’m talking about. I know there are some other issues with the code there and I might end up rejigging things a bit.

6

HI,

I could hardly notice the jog so I may be looking at the wrong thing. Anyway try this and see if it makes a difference:


#bg {
    background: url(http://ctrlshiftweb.com/verve/images/bg.jpg) 50&#37; top no-repeat;    
    min-height: 100%;
    overflow: hidden;
 [B]  width:auto;[/B]
[B]    min-width:808px;
    padding:0 0 0 1px;    
}
* html #bg{height:100%}[/B]