Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

Why doesn't this background image look correct?

Head out to http://brucegust.com/partners/header.php

My background image looks fine in IE 8 and Safari, but it's shifting to the right in IE 11 and I don't know why.

While you can see my entire stylesheet at http://www.brucegust.com/partners/stylesheet.css, the portion that applies directly to my background image is:

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1620px;
      
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
      
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1620px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -553px;   /* 50% */
  }
}

#header_top {
position:relative;
width:976px;
height:135px;
background-image:url(images/header_top.png);
background-repeat:no-repeat;
margin:auto;
margin-top:10px;
}

What do I need to improve in order to ensure a full screen background image in IE11?

Thanks!
SOLUTION
Avatar of Carl Tawn
Carl Tawn
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bruce Gust

ASKER

What should it be? I went and changed some things, kind of kicking myself for missing something that obvious, but after playing with it, I'm thinking there's more to this than just changing the margin.

I change it, but I need to the image to stretch to whatever the browser window is. How can I pull that off?
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I just got rid of the "1620 pixel" component altogether and it looks great!

Thanks!