css2 repeat-x problem [Archive] - Dynamic Drive Forums

nileland76

01-31-2010, 09: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">

<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, 02: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.