Why doesn't this background image look correct?

Posted on 2014-03-31
Last Modified: 2014-03-31
Head out to

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, the portion that applies directly to my background image is: {
  /* 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 */ {
    left: 50%;
    margin-left: -553px;   /* 50% */

#header_top {

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

Question by:brucegust
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
LVL 52

Assisted Solution

by:Carl Tawn
Carl Tawn earned 500 total points
ID: 39966972
In chrome at least, it is the:
@media screen and (max-width: 1620px) { /* Specific to this particular image */ {
    left: 50%;
    margin-left: -553px;   /* 50% */

Open in new window

That is throwing it off.

Author Comment

ID: 39967001
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?
LVL 52

Accepted Solution

Carl Tawn earned 500 total points
ID: 39967014
If it is intended to be a background for the whole site, then you should make it the background-image of the body element, rather than having it as a separate img element:
body {

Open in new window


Author Closing Comment

ID: 39967073
I just got rid of the "1620 pixel" component altogether and it looks great!


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question