PDA

View Full Version : css2 repeat-x problem



nileland76
01-31-2010, 08:43 AM
Hi everyone,

I have always used

background-image: repeat-x;

like everyone else but this time, for some reason
the repeat-x dosen't work when I lower my monitor resolution to 800x600
IT happens on all browsers IE7/IE8/IE6 and all Firefox versions , something must be wrong with my code, but I can't find the relationship between monitor resolution and background-image repeat,
I am sending you both the URL of the website and the HTML css Codes.
and also i SHOULD mention that this problem only happens with my header and footer, not the container (container also has a bg repeat)

this is the url:
http://maryamkazerooni.com/catering/

this is the HTML:


<body>
<div id="bg-gallery">

<div id="header-wrapper">
<!--header-wrapper is the problem -->
<div id="header">
<div id="nav">
<div id="navwrapper">

</div>
</div>
</div>
</div>

</body>

AND THIS IS THE CSS


body {
background: url(../images/body-bg-about.jpg) repeat-x 0 0;
background-color:#eff18c;
height:100%;
margin:0;
padding:0;
}

#bg-gallery {
width:100%;
height:899px;
background: url(../images/body-bg.jpg) repeat-x;
background-color:#ddd29a;
}



#header-wrapper{
margin: 0px;
padding: 0px;
background: url(../images/header-bg.jpg) repeat-x -20px top;
width:100%;
height:206px;

}
/*#header-wrapper is the problem*/

#header{
width: 980px;
height:201px;
margin:auto;
background:url(../images/logo-1.jpg) no-repeat center top;

}

thank u sooo much, I HAVE BEEN WORKING ON THIS FOR 3 DAYS,BUT I JUST CAN'T FIND THE LOGIC BEHIND THE PROBLEM:confused:

simcomedia
02-02-2010, 01:45 AM
There's no CSS parameters for background display and screen resolution. In other words, a background is a background and doesn't matter what their resolution is set at except it would just look different (scrunched perhaps).

Why did you assign it a z-index? That's for layering. If what you want to accomplish is div's inside div's then you don't need the z-index reference.