CODEWITHSUNDEEP
imagehtmlinternet-explorer-8css
Emily
Emily

Reputation: 11

workaround for "background-size" CSS property in IE8, trying to layer two divs

Read through the forum for ways to get a background image to cover a div regardless of size, and discovered the "background-size" CSS property. It's a gem and works beautifully in Firefox, but unfortunately I’m working for a large company where IE8 is the standard. The browser doesn’t recognise “background-size” and I’m going to have to cheat for the desired effect.

I’m trying to layer two divs – one with the image sized to fit the div in an img tag, the other containing the text to superimpose. Independently, both divs are working fine, but they aren’t layering at all. They keep appearing one after the other.

I’ve tested with z-index values, absolute and relative positioning combinations, floats, etc. but no luck. Feels like I must be missing something obvious, and another pair of eyes would be much appreciated.

The latest CSS is below:

.case-background {
margin-left: 93px;
margin-right: 93px;
border: 1px solid #665546;
}
.case-background img {
height: 100%;
width: 100%;
position: relative;
z-index: 0;
}
.case-text {
margin: 12px;
padding-left: 35px;
padding-right: 35px;
border: 1px solid #665546;
font-family: Arial, Helvetica, sans-serif;
color: #665546;
border: 1px solid #665546;
font-weight: normal;
background-color: #FFFFFF;
position: relative;
z-index: 1;
}

HTML is as follows, minus the header info and html, head, body tags, etc.:

<div class="case-background">
<img src="images/test.jpg" />
<div class="case-text">
<h2>testing header</h2>
<p>testing paragraph</p>
</div>
</div>

Upvotes: 1

Views: 830

Answers (1)

Spudley
Spudley

Reputation: 168715

CSS3Pie is a library that adds a number of CSS3 features to older versions of IE. It's really good if you're stuck on IE8 but need to support a few modern CSS features.

The latest version of CSS3Pie includes support for the background-size style. So with CSS3Pie, you could therefore just use standard CSS to get your background size effect.

There are a number of other javascript hacks you could use that would also do the same thing, but CSS3Pie is a great little tool; I'd recommend it every time.

Upvotes: 1

Related Questions