IE9 Background Width

[robertallen]

Hi all,

Please forgive me for posting so many requests for help. I hope I’m not annoying you guys. It’s just after I do a search on Google and do a few solutions nothing ever seems right.

I’m trying to get a background color to stretch width wise across the entire browser…looks great in everything except IE9 (I am dreading checking this site in IE8, as I know there will be a ton of issues, but I’ll combat them later).

This is my code here…
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#header {
background: #000;
box-shadow: 0px 3px 7px #000;
-webkit-box-shadow: 0px 3px 7px #000;
margin: 0;
width: 100%;
position: relative;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}

I’ve tried everything I can think of, from overflow to background-size: cover.

You can see the site at [http://www.diamondcreationsjewelers.com](http://www.diamondcreationsjewelers.com “Diamond Creations Jewelers”)

The footer needs this as well, but once I do the top I can figure out how to do the bottom.

The only thing that’s in a 1200px container is the body of the site. The header and footer are 100% width.

Also does anyone happen to know a decent Firebug alternative for IE9?

Again, I apologize I’m asking a lot of questions, if it gets too much please let me know, I’ll gladly calm down.

(Not sure why the “Code” feature isn’t working for me in the forum postings. My apologies it’s not in the code background.)

[Paulie_D]

IE has its own developer tools…Press F12.

They aren’t as good as Firebug or Web Inspector but they work.

Regardless, your header and footer have background colors across the whole broswer window in IE9.

Oh, and

background-size

doesn’t work on bg colors.

[robertallen]

It does?

On mine it shows it cut off right before the Facebook icon.

That’s strange.

[robertallen]

I’m still having the worst time with this. It stretches on all browsers except IE8 and IE9.

Obviously, because IE just loves to be different in CSS rendering.

Can anyone help me? It’s not stretching on any computers.

I’m not sure why it’s doing it successfully on yours, Paulie…what’s your resolution?

[robertallen]

On a side note, I hate how wide this site is. But that’s what they wanted and they were adamant about it. What can you do?

[robertallen]

#header {
background-color: #000000;
background-size: cover !important;
margin: 0;
position: relative;
width: 100%;
}

What am I missing here?

[Watson90]

Use this, it should work:

#header {
background: black;
margin: 0;
height: 100px;
}

[robertallen]

Yeah that didn’t work either.

This is what I’m seeing on IE8/IE9…yet all the other browsers show full width.
[see screenshot…](http://www.robertallenbaker.com/diamondscreen.jpg “Screenshot”)

[Watson90]

Your CSS hasn’t changed one bit?

#header_container {
background-color: #000000;
margin: 0;
padding: 0;
width: 100%;
}
#header {
background-color: #000000;
background-repeat: repeat;
background-size: cover !important;
margin: auto;
position: relative;
}

[Watson90]

Okay, @robertallen

Upon inspection using the IE9 Developer tools, you have placed your website in a div with an ID of **wrapper** which has a width of 1200px. And you have also attempted to style it twice in your stylesheet.

Your CSS for both of them is this;

#wrapper
{
width: 1200px;
overflow: auto;
border-top-color: currentColor;
border-right-color: currentColor;
border-bottom-color: currentColor;
border-left-color: currentColor;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

#wrapper
{
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: -25px;
margin-left: auto;
min-height: 100%;
}

[robertallen]

Sorry about that. I meant to post last night and completely forgot to. After a week or so I just gave up and decided to wrap it all in a 1200px container in IE and add a border using the IE condition tags. On FFox/Safari and Chrome it is full width background.

Very very sorry I wasted your time. I just gave up on this one for now. It just drove me nuts to the point where I just couldn’t handle it anymore.

I hate Internet Exploder so bad. But it’s the most popular browser right now, unfortunately.

Thank you for showing me that code though. I’ll for sure clean it up. I have a habit of writing too much CSS code sometimes.

[Watson90]

By the looks of things, all you would’ve needed is something like this;

http://codepen.io/Watson90/full/vmxHd

[Senff]

> I hate Internet Exploder so bad.

Because it does exactly what you tell it to do in your code? :)
Without that conditional code you put in to wrap it in a 1200px container, things look quite the same to me in FF/Chrome/IE.

[robertallen]

It’s strange to me, because Paulie_D said the same thing, that they stretch across…but on two computers they didn’t.

Watson, thank you so much for that code. I’m seeing there’s a bit of significance to the !important element in CSS.

I’m still learning, even though I’ve been playing with CSS for 2 or 3 years.

Hope I didn’t anger anyone on here. I’m not giving up on it, I’m just going to play around with it on a Sandbox server so that it’s not wierd looking live.

[Senff]

> I’m seeing there’s a bit of significance to the !important element in CSS.

There is significance to it, but it’s not a solution I would ever recommend unless you have to override styles that are provided by a third party. In my opinion, !important is generally a band-aid for a boo-boo that resides somewhere else in your code. Instead of patching the bug, it’s better to completely remove it.

You didn’t anger anyone, not me at least. No worries, we’re all here to learn!

[Author]

Posts