How to keep middle image sized properly in IE

[Jedireg]

I have a site that works fine in Chrome and other browsers, that is except IE ( go figure )

what i have is background image that is divided into 3 pieces. the left and the right pieces are fixed in width and should not change. I’d like the middle piece to auto fill the space between the two edge images.

a copy of my code can be found here: http://codepen.io/anon/pen/jkqAl

i have tried attaching my css to the html tag as well as the body tag and it doesn’t make a difference. I’ve tried the “trick” discribed here ( http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml ) and here ( https://css-tricks.com/perfect-full-page-background-image/ ) neither of which fit my particular need and I was unable to modify either example to work.

on the plus side the viewing environment is fairly controlled and I don’t need to worry about backwards compatibility beyond IE 7.

I would prefer to stick to a purely css solution if possible
thanks in advance for any help that can be given.

[Jedireg]

figured out something that would work for me, not quite what i was hoping for but it works.

[Jedireg]

added the following code to my CSS statements

` .TopCenterMS
{
position: Absolute;
top: 0px;
left: 287px;
height: 116px;
width: 562px;
overflow: visible;
border: none;
background: #ffffff;
background-color: transparent;
z-index: 1;
}
.TopCenterMS img
{
position: absolute;
top: 0px;
left: 0px;
height: 116px;
width: 562px;
z-index: 1;
}`

and then added some IE specific conditional statements in the body of my html as shown below

`

`

while this doesn’t give me a center image that dynamically resizes with the page, it does ensure the IE stretches the image to completely fill the space between the two edge images when it renders the page.

an interesting note however, the `` would not render correctly if formatted in the same format as the `` statement. IE would render it properly but not chrome. I suppose this is because chrome saw it as a comment and completely ignored it. took away the “–” on the beginning and ending of the code segment and chrome processes it completely as expected.

if anyone else has another way of doing this or improving on it, i’d be interested to see it.

[Author]

Posts