Solved

Why doesn't this background image look correct?

Posted on 2014-03-31
4
254 Views
Last Modified: 2014-03-31
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!
0
Comment
Question by:brucegust
[X]
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
4 Comments
 
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 */
  img.bg {
    left: 50%;
    margin-left: -553px;   /* 50% */
  }
}

Open in new window

That is throwing it off.
0
 

Author Comment

by:brucegust
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?
0
 
LVL 52

Accepted Solution

by:
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 {
     background-image:url(images/header_top.png);
     ...
}

Open in new window

0
 

Author Closing Comment

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

Thanks!
0

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 google.com/fonts: 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