...

View Full Version : body background problem



jorrelemargi
10-24-2006, 07:54 PM
Hi all,

first of all, thanks for letting me post here ;)
I have a CSS issue that has cost me already many hours and a lot of headache :thumbsup:

so , what the deal :

My website is not online yet, but the situation also occurs on www.geenstijl.nl so it seems...

I have a background image for my body that is always centered. However, if I resize my browser window to a smaller resolution than my background image, the background image keeps moving to the left and screws up my layout.

You can go to www.geenstijl.nl and resize your window, you will see that also their background image is moving to the left when resizing...

my css body code is the following:

body {
min-width: 990px;
border:thin;
font-size:11px;
background-position:center;
text-align:center;
margin: 0 0 1em 0;
padding: 0 0 1em 0;
background: url(images/body-bg.png) repeat-y top;
width: 990px;
margin-left:auto;
margin-right:auto;
font-size: 11px;
}

mark87
10-24-2006, 08:51 PM
Because you have no 'center' attrtibute in there.

background: url(images/body-bg.png) repeat-y top center;

Edit; sorry didn't see that lurking there already.

Possibly the min-width, but try slimming the code down a bit to find where the problem occurs. I don't see the problem in IE6 or Firefox.

jorrelemargi
10-24-2006, 10:58 PM
in IE it works perfect , in FF the background image keeps moving to the left when I resize my window.

here's my main html code:

<div id="container">
<div id="header"></div>

<div id="header_blackbar">
<div id="breadcrumb"></div>
<div id="datestamp"></div>
</div>

<div id="navigation_left">
<div id="categories"></div>
<div id="sidebar-left">&nbsp;</div>
</div>

<div id="content_middle">
<div id="main"></div>
<div id="content_right"></div>

</div>


that's pretty basic already isn't it?

jorrelemargi
10-24-2006, 11:07 PM
just to say: it even has the error when using only the body CSS code in my stylesheet and NOTHING else. I guess that's a good example of trimming down the code?

Am I doing something wrong here by putting the background code into the body ?

or is it a firefox interpretation error?

jorrelemargi
10-25-2006, 08:23 AM
Because you have no 'center' attrtibute in there.

background: url(images/body-bg.png) repeat-y top center;

Edit; sorry didn't see that lurking there already.

Possibly the min-width, but try slimming the code down a bit to find where the problem occurs. I don't see the problem in IE6 or Firefox.

maybe a good thing to know is that my background image is e.g. 2000 pixels wide.

if you try it with that, you'll see what I mean
Let me know

thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum