DIV background-image fails to stretch in MS Explorer HELP!

only1egg · 13th February 12, 08:27 AM

Hello WeLoveCSS Geniuses...

Tried posting this issue a couple of months ago… Didn’t seem to go anywhere. Basically just a newbie who’s building a personal website with out of date books, old software, on a home-built computer, now resorting to begging for answers from folks with vastly more CSS experience.

Anyway... struggling with a seemingly straightforward, variable width page design with a top banner, main css menu bar, followed by three <div> containers for text and assorted images. Have these three bottom <div> containers, as well as proceeding top <div>s, all sharing a similar but separate background-images, each intended to stretch 100% the width of the page, but it’s not working….

Sample page linked here:
http://only1egg-productions.org/rebu...frame_temp.htm

All these background-images stretch just fine in both Firefox and Chrome, but the same page fails to work properly when viewed through MS Internet Explorer 8 (yes… I’m still running WinXP, so unable to upgrade my MS browser to ver9). For some reason the background-images all fail to stretch over the width of my MS Explorer 8 browser, and seemingly no amount of ‘dumb force’ coding is getting me anywhere.

Below is a sample of the garbled CSS that I’ve been struggling with:

Code:

<style type="text/css"> 
 
. body {
  margin: 0;
  padding: 0;
}

.content { 
margin-left: 4%;
margin-right: 2%;
}

.stretch {
background-size: 100% 100%;
background: stretch;
}

.background {
 background-position: center;
 position: relative;
max-width: 100%;
min-width: 100%;
left: 0px;
right: 0px;
z-index: 100;
}
 
.style0{
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
} 

.menutext{
text-align:left	
} 

.maintext {
text-align: left;
color: #333333;
margin-left: 10%;
margin-right:10%;
font-size:small;
z-index: 200;	
} 

.textstyle1 {
font-size: x-large;
} 

#top_banner {
background-repeat: no-repeat;
width: 100%;
z-index: 100;
height: 120px;
}

#main_menu {
position: relative; 
background-position:center;
background-repeat: repeat-y;
width: 100%;
z-index: 650;
height: 31px;
top: 0px; 	
}
 
#top_holder {
background-repeat: no-repeat;
width: 100%;
z-index: 100;
height: 37px;
top: 0px; 	
}
 
#main_content {
background-repeat: repeat-y;
width: 100%;
z-index: 100;
height: 100%;
top: 0px;
}
 
#bottom_nav {
background-repeat: no-repeat;
width: 100%;
height: 65px; 
z-index: 100;	
top: -175px;
}
 
.style1 {
color: #666666;
}
</style>

And then to keep this web page example complete, here is a sample of the HTML:

HTML Code:

</head>
 <body>
<div class="content">
 <div id="top_banner" class="background stretch" style="background-image: url('base_images/ShadowBanner.jpg');">
<div style="position: absolute; width: 310px; height: 20px; z-index: 100; margin-left: 0%; margin-right: 0%; top: 50px; left: 35%;" id="layer1" class="style1">
... this is where the banner goes ...
</div>
</div>
<!-- Menu Site Links -->
<div id="main_menu" class="stretch menutext" style="background-image: url('base_images/ShadowMenuBack.jpg');">   
<ul id="nav" class="dropdown menutext" style="left: 5%; z-index: 650;">
<!-- Only 1 Egg Home Site Links -->
	<li id="n-first"><a href="shadowframe_temp.htm"><strong>Site Home</strong></a>
		<ul>
		</ul>
	</li>
<!-- Second Site -->
		<li id="n-second"><strong><a class="dir" href="shadowframe_temp.htm">Second Section</a></strong>
		<ul>	
		</ul>
		</li>
<!-- Third Site -->
	<li id="n-third"><strong><a class="dir" href="shadowframe_temp.htm">Third Section</a></strong>
		<ul>	
	</ul>
	</div>
	<!-- End Menu Site Links -->
<div id="top_holder" class="background stretch" style="background-image:url('base_images/ShadowFrameAbove.jpg'); height:37px;"/>
</div>
<div id="main content" class="background stretch" style="background-image:url('base_images/ShadowFrameMiddle.jpg'); min-height:125px; top: -15px"/>
      <div style="position: relative; width: 100%; min-height: 75px; z-index: 300; margin-left: 0%; margin-right:0%; top:-5px;" id="layer2">
<div class="maintext">
<p class="textstyle1">.... this is where most of my stuff should go.....</p>
        </div>
       </div>
</div>
<div id="bottom_nav" class="background stretch" style="background-image:url('base_images/ShadowFrameBottom.jpg'); height:65px; top: -25px"/> 
	<div style="position: relative; width: 100%; height: 65px; z-index: 300; top:-0px; margin-left: 5%; margin-right:5%;" id="layer2">	
<div class="maintext">   
<p>.... this is where my footer menu goes.....</p>
 </div>       	
 </div>
 </div>
 </div> 
</body>

The really frustrating thing here is when these background-images are taken out of their <div> and placed separately within the page along side the rest of the content, MS Explorer then stretches them out as needed, but this change then throws the rest of my content completely off the page! WTF?!?

Honestly, I’m totally stumped why MS Explorer fails to properly display the same CSS code correctly that other browsers (FF and Chrome) seem to load without any problems. At this stage, I feel like I’ve thrown so damn many background-image variables at this question that I don’t know which end is up any more. I simply assume to be missing some fairly obvious CSS coding error here, or I’d expect to find other similar forum posts relating to this I.E. issue. I’ve begun to think (hope...) that there might be a java.script solution to fix this problem, but such an answer lies beyond my personal web coding abilities, which frankly seems almost near zero at this point.

Anyway... I guess it best to start a new thread again to ask for further assistance. Thanks in advance for any help or suggestions anyone might be able to provide, fingers crossed that I can find the answer to this page width problem sometime soon...

Regards,
Richard
Only1Egg

chrishirst · 13th February 12, 08:35 AM

That will because IE8 does NOT support background-size and probably never will.

only1egg · 14th February 12, 05:46 PM

Hello Chris,

Thanks for the point of fact that IE8 will not recognize "background-size" although other browsers clearly do. While I now understand this will NOT work, can you please provide me with any suggestions as to what specific CSS code actually WILL work in IE8 to make these background images stretch the full width of the page? Is there a direct solution to this pesky issue (either in CSS or perhaps java.script?) or must I simply reconsider the entire design for my updated web site?

Any help you can provide would be greatly appreciated! Thanks again!

Richard

chrishirst · 14th February 12, 08:13 PM

http://css-tricks.com/how-to-resizea...kground-image/

only1egg · 16th February 12, 07:59 AM

Hello Chris,

Thanks for the reference link... Which I had run across myself sometime back.

The trouble I've found with this particular solution is while it does work for filling backgrounds of an entire page, it seemed to not work so well for stretching individual background images that have been divided up into separate DIV sections.

Are you aware of any solution that specifically stretches smaller background images across the width of separate DIVs?

Again... any and all assistance is greatly appreciated.

Richard
Only1Egg

chrishirst · 16th February 12, 02:55 PM

The only way would be to have images set for EVERY possible size of browser window and make a "AJAX" request to the server to provide the appropriate image.

Or you could simply not bother and use CSS3 multiple backgrounds properties, which is better supported, and will degrade cleanly if not, with your image set center/center as front image with a repeating filler image just behind it and the background-color property set for browsers that only support a single background image.

13th February 12, 08:35 AM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: DIV background-image fails to stretch in MS Explorer HELP! That will because IE8 does NOT support background-size and probably never will.

14th February 12, 08:13 PM	#4
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: DIV background-image fails to stretch in MS Explorer HELP! http://css-tricks.com/how-to-resizea...kground-image/

16th February 12, 07:59 AM	#5
only1egg WLC Member Join Date: Dec 2011 Posts: 4	Re: DIV background-image fails to stretch in MS Explorer HELP! Hello Chris, Thanks for the reference link... Which I had run across myself sometime back. The trouble I've found with this particular solution is while it does work for filling backgrounds of an entire page, it seemed to not work so well for stretching individual background images that have been divided up into separate DIV sections. Are you aware of any solution that specifically stretches smaller background images across the width of separate DIVs? Again... any and all assistance is greatly appreciated. Richard Only1Egg

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

14th February 12, 05:46 PM	#3
only1egg WLC Member Join Date: Dec 2011 Posts: 4	Re: DIV background-image fails to stretch in MS Explorer HELP! Hello Chris, Thanks for the point of fact that IE8 will not recognize "background-size" although other browsers clearly do. While I now understand this will NOT work, can you please provide me with any suggestions as to what specific CSS code actually WILL work in IE8 to make these background images stretch the full width of the page? Is there a direct solution to this pesky issue (either in CSS or perhaps java.script?) or must I simply reconsider the entire design for my updated web site? Any help you can provide would be greatly appreciated! Thanks again! Richard

16th February 12, 02:55 PM	#6
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: DIV background-image fails to stretch in MS Explorer HELP! The only way would be to have images set for EVERY possible size of browser window and make a "AJAX" request to the server to provide the appropriate image. Or you could simply not bother and use CSS3 multiple backgrounds properties, which is better supported, and will degrade cleanly if not, with your image set center/center as front image with a repeating filler image just behind it and the background-color property set for browsers that only support a single background image.