background stretches in other browsers, but not IE?

[only1egg]

Hello WeLoveCSS Gurus...

Guess I’m just a simpleton building my little website from old books, dated software, on a home-built computer, trolling forums like this one to figure out my latest problem. But after digging around for many nights on end, I’ve yet to find a solution to this most vexing css glitch.

Anyway... a ‘Dynamic Web Template’ created in MS Expression Web editor is nearly complete. This seemingly straightforward, variable width page design has a top banner, main css menu bar, followed by a three <div> container for text and assorted images. Each of these three bottom <div> containers, as well as proceeding top <div>s, all share a similar but separate background-images, each stretching 100% the width of the page, with one exception.

The background-image of <div id="main content"> does ‘repeat-y’ down the page like it should, yet this same css fails to also stretch <img src="FrameMiddle.jpg"/> across the page, stubbornly remaining at ‘default’ size instead of the intended 100% width. Now the really odd thing is this <div id="main content"> background-image stretches just fine in both Firefox and Chrome, but the same page is broken when loaded by MS Internet Explorer. This single background-image always fails to reach over to the right margin, and seemingly no amount of ‘dumb force’ coding is getting me anywhere.

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

/* Internal Style: */
.stretch {
width: 100%;
background-size: 100% 100%;
min-height:100%;
min-width:100%;
}

/* Divs that work, and one that doesn't */
/* Div 'top holder' works as it should... fills the Div from top to bottom, and stretch fully from side to side */
<div id="top holder" style="position: relative; z-index: 100; width: 100%; height: 40px; top: -31px;">
<div id="background"><img src="base_images/FrameAbove.jpg" width="100%" height="40" class="stretch"/></div></div>

/* This 'main content' Div works in part... fills from top to bottom, yet fails to stretch 100% across the page only in IE, but FF and Chrome worse */

<div id="main content" style="position: relative; width: 100%; min-width: 100%; min-height: 100%;">
<div id="background" style="z-index: 200; position: relative; width: 100%; min-width: 100%; min-height: 100%; top: -2px;" class="stretch">
<div id="textbox" style="z-index: 250; position: relative; width: 100%; min-width: 100%; min-height: 100%; top: -1px;">
<!-- #BeginEditable "main_content" -->
&nbsp;
<!-- #EndEditable -->

</div>
</div>
</div>
/* Yet this final Div also works as intended... fills top to bottom, and completely from side to side */

<div id="bottom_nav" style="position: relative; z-index: 100; width: 100%; height: 70px; top: 2px;">
<div id="background" style="z-index: 150"><img src="base_images/FrameBottom.jpg" width="100%" height="70" class="stretch"/>
<div id="background" style="z-index: 200">
<div style="position: relative; width: 100%; height: 70px; z-index: 250; margin-left: 0%; margin-right: 0%; top: -63px; " id="layer1">

<!-- #BeginEditable "bottom_nav" -->
&nbsp;
<!-- #EndEditable -->

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


/* Seperate CSS Layout */
#background {
position: relative;
min-width: 100%;
height: auto;
left: 0px;
right: 0px;
z-index: 200;
}
#stretch {
width:100%;
height:100%;
}
#top_holder {
background-size: 100% 100%;
background-repeat: no-repeat;
background: stretch;
}
#main_content {
background-image:url('../base_images/FrameMiddle.jpg');
background-repeat: repeat-y;
background-size: 100% 100%;
width:100%;
min-width:100%;
min-height:100%;
background: stretch;
}
#bottom_nav {
background-repeat: no-repeat;
background: stretch;
}

Honestly, I’m just stumped why I.E. fails to properly display any css code when other browsers load from the same page with no 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, or I’d be finding other similar forum posts to this I.E. issue. Lately I’ve wondered if there might be a java.script solution to this problem, but that answer lies beyond my personal web site pay grade, which is frankly zero at this point.

Anyway... I guess after trolling through these forum archives so many times in the past, it is nice to start a new thread of my own for a change. Thanks in advance for any help or suggestions you might be able to provide, fingers crossed that I can be launching these pages sometime soon...

Regards,
Only1Egg

[chrishirst]

Please edit your post and wrap the CSS in [code] delimiters and the HTML in [html] delimiters so it is easier to read.

And background-size is a CSS level 3 property that is not supported by all browsers.

[royarellano]

This should do the trick - Full image background

[louisremi]

In modern browsers you can now use the CSS3 property background-size

.selector {
    /* will stretch the image so that it covers all of the element */
    background-size: cover; 
    /* will stretch the image so that it fits perfectly inside the element  */
    background-size: contain;
}

This allows to achieve background stretching while preserving the aspect ratio of the background-image: https://developer.mozilla.org/en-US/...ackground-size

I’ve personally developed a polyfill that implements those properties in IE8: https://github.com/louisremi/background-size-polyfill

[LearningCoder]

Ah thank you for that information. I am using a background image within a contain which kept repeating vertically.

Regards,

LC.