Solved

Why doesn't this background image look correct?

Posted on 2014-03-31
4
245 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
  • 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now