css2 repeat-x problem

**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:

Code:

<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

Code:

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

**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.

Thread: css2 repeat-x problem

Thread Tools

Search Thread

css2 repeat-x problem

Bookmarks

Bookmarks

Posting Permissions