Solved

Why doesn't this background image look correct?

Posted on 2014-03-31
4
256 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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

751 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