BG Image repeats on the Right side only

system · February 25, 2011, 10:18pm

Could someone help me as to why the background image on this page, does not repeat-x on the left side and only repeats on the right side ?

Style:
#Serv {
    position: relative;
	background:url('/construction/images/bg_services.jpg' repeat-x;
	background-position: 24%;
	overflow: hidden;
    margin: 78px 0 90px 268px;
}

system · February 25, 2011, 11:05pm

I have a another question, about my page which is in construction. How is it known that the width of the page is 1160px ? If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?

ralphm · February 26, 2011, 3:27am

It’s because you have a large margin set on that element, and a bg image does not show in an element’s margin. You could use padding instead:

#Serv {
  background: url("/construction/images/bg_services.jpg") repeat-x scroll 24% 50% transparent;
  [COLOR="Red"]padding[/COLOR]: 78px 0 90px 268px;
  overflow: hidden;
  position: relative;
}

ralphm · February 26, 2011, 3:29am

#wrapper {
  background: none repeat scroll 0 0 #000000;
  margin: 0 auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  [COLOR="Red"]width: 1160px;[/COLOR]
}

Not sure if that’s what you are asking, but it seems like the obvious answer. The wrapper is set to that width.

system · February 26, 2011, 6:13am

If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?

I didn’t know that margin could effect the BG image.

ralphm · February 26, 2011, 12:25pm

You’re welcome.

system · February 26, 2011, 2:25pm

I forgot to point out the quote in message #5 which remains unanswered, that is why there was no ‘thank you’ !

system · February 27, 2011, 1:50am

Ralph I’m hoping you had a response ?

ralphm · February 27, 2011, 2:30am

If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?

The question is a bit hard to understand. My intitial response is:

if the header is set to width: 100% (or even if that isn’t specified) it will be 100% width, as that’s the normal behavior of a div. So the header will be the full width of the window, even if it doesn’t appear so.
so “how can you fix this” doesn’t really mean anything to me. Do you want a set width to it, or want it to exapnd the full viewport width? If the latter, you can give it a background color or bg image to show that it visually spans the whole width.

system · February 27, 2011, 6:34pm

I want the #header to expand to the full width of the page, because it’s no longer within #wrapper. Width{100%} doesn’t have any value because it’s no longer the child or #wrapper. How can I resolve this ?

Victorinox · February 27, 2011, 7:00pm

#header is expanding the full width of the page. It has a background color with the value #AAA.

system · February 27, 2011, 8:49pm

Correct, but it’s not the full width of the page no longer. Scrolling horizontally shows the space to the right.

Victorinox · February 27, 2011, 10:47pm

I’m too busy to get involved right now, but here’s a stripped down version of your page that demonstrates the problem and may help someone suggest a fix.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Debugging Creative Sheep Header Width</title>

<style type="text/css">

	html, body {
		height: 100%; /* reference for #wrapper min-height:100% */
	}

	body {
		margin: 0;
		padding: 0;

	}

/*===  Beginning of Layout Structure ===*/
	#wrapper { /* do not set overflow:hidden; here, Opera will not comply */
		width: 1160px;
		min-height: 100%;
		overflow: hidden;
		margin: 0 auto;
		background: #000000; /*BG color for #content*/
		position: relative;
		color: #fff;
	}

	#header {
		min-height: 120px; /* 152px total w/ padding */
		padding: 2px 0 12px; /* preserve space for #nav and uncollapse child margins */
		background: #AAA;
		width: 100%;
	}

</style>  

</head>

<body>

<div id="header"><h2>#header</h2></div>
<div id="wrapper"><h2>#wrapper</h2>When the viewport is narrower than #wrapper, the width of #header does not expand when scrolling to the right.</div>

</body>

</html>

ralphm · February 27, 2011, 11:01pm

Nice work, Victorinox.

All that’s needed is this:

#header {
  min-width: 1160px;
}

system · February 28, 2011, 3:46am

I had originally put the width to 1160px, that didn’t solve it. Thanxs!

ralphm · February 28, 2011, 4:49am

When you narrow the viewport, it narrows the div set to width: 100%. But as you see, if you drag the scroll bar to the right, the div doesn’t resize again. So setting that min-width prevents the div from growing smaller than the wrapper, which means the problem goes away. When you scroll right, you’ll only ever be able to scroll are far right as the widest element goes.

Rayzur · February 28, 2011, 6:34am

As it is right now you are getting a 134px scrolling distance right off the bat without any content reaching the bottom.

You can prevent the #header height from being added to the #wrapper’s
min-height:100% by nesting an inner content div in the wrapper.

Drag the wrapper underneath the header with a negative top margin then set RP on the header to layer it on top.

Now pad out the top of the content div that is nested in the wrapper to push content below the header.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Debugging Creative Sheep Header Width</title>
 
<style type="text/css">
html, body {
    height: 100%;/* reference for #wrapper min-height: 100% */
}
body {
    margin: 0;
    padding: 0;
}

/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
#content:after { /* #content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    font-size:0;
}

/*===  Beginning of Layout Structure ===*/
#header {
    position:relative;
    z-index:1;
    min-width: 1160px;
    min-height: 120px;/* 134px total w/ padding */
    padding: 2px 0 12px;/* preserve space for #nav and uncollapse child margins */
    background: #AAA;
}

#wrapper {/* do not set overflow: hidden; here, Opera will not comply */
    width: 1160px;
    min-height: 100%;
    margin: -134px auto 0;
    background: #000000;/*BG color for #content*/
    position: relative;
    color: #fff;
}
#content {
    min-height:0;/*IE7 haslayout*/
    padding:134px 0 0;
}
 
</style> 
 
</head>
<body>
 
<div id="header">
    <h2>#header</h2>
</div>

<div id="wrapper">
    <div id="content">
        <h2>#wrapper</h2>
        When the viewport is narrower than #wrapper, the width of #header does not expand when scrolling to the right.
    </div>
</div>
 
</body>
 
</html>