Header Image won't cover page width

Question

I am continuing to practice with HTML and CSS. I am trying to make an image go the width of the page, centered below the header. For some reason, it won't work when I try options on stretching it. My guess is that there is an option I have yet to come across to do so.

CSS

#header {

height: 80px;
background-color: gray;
margin-bottom: 60px;


}

.container {

}

.MainImage {

background-image:url(computers.jpg);
height: 400px;
background-repeat: no-repeat;
width: 100%;

}

.MainImage img {

position: relative;
background-size: cover;

}

HTML

<body>

<div id = "header">
<div class = "nav">

    <!-- container-fluid gives full width container of whole viewport -->

    <div class = "container-fluid">


    <ul id = "nav" class= "text-left">
        <li><a href = "#"><strong>Home</a></li>
        <li><a href = "#">Technologies</a></li>
        <li><a href = "#">Programs</a></li>
        <li><a href = "#">Blog</strong></a></li>
    </ul>

    <ul id = "nav" class = "text-right">
        <li><a href = "#"><strong>Sign Up</a></li>
        <li><a href = "#">Sign In</a></li>
        <li><a href = "#">Contact</strong></a></li>
    </ul>

    </div><!-- end container-fluid-->
</div><!--end nav-->
</div> <!-- end header --> 



<div id = "Main">


    <div class = "MainImage">


    </div>


</div><!--end Main-->



</body>

http://jsfiddle.net/xehu1tg0/

UPDATE: my IE 10 image error

enter image description here

try using CSS to centre the image first `text-align: center;` then you can increase the width to 100%. I also see you're using it as a background image, try adding `background-size: cover;` to the CSS rule for the image — Lee, Jan 05 '15 at 14:08
Use `background-size: 100% 100%` -----> [Fiddle](http://jsfiddle.net/xehu1tg0/3/). — Weafs.py, Jan 05 '15 at 14:10

score 2 · Accepted Answer · answered Jan 05 '15 at 14:09

2

You need to add background-size: 100% auto; to your .MainImage class, like so:

.MainImage {
    background-image:url(http://www.onlineuniversities.com/wp-content/uploads/improving-tech-literacy.jpg);
    height: 500px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
}

The height and width properties only affect the container element, not the background image itself.

100% auto essentially means the image size should be 100% the width of its container, and the height should scale automatically with the width (where you see two values like this, the first almost always relates to the x axis, with the second relating to the y axis.)

I hope that makes sense?

Example: http://jsfiddle.net/w1020vu1/

answered Jan 05 '15 at 14:09

Sean

6,389
9
45
69

This worked too but once again my IE 10 doesn't accept it, only Google Chrome. – narue1992 Jan 05 '15 at 14:18
What do you see in IE 10? I don't know of any obvious reason why this shouldn't work in IE 10, as it supports the `background-size` property (http://caniuse.com/#search=background-size) – Sean Jan 05 '15 at 14:22
Have you tried inspecting the code using IE10? Does it show the `background-size` property in the developer tools? – Sean Jan 05 '15 at 14:23
i uploaded the IE view in my post. – narue1992 Jan 05 '15 at 14:24
I am not sure what you mean inspect the code in IE. I check it out in jsfiddle in IE but I was told by someone else in the past that jsfiddle automatically formats stuff like that for the browsers. – narue1992 Jan 05 '15 at 14:26
It works in IE 11 for me. So, I suppose it should be ok in IE 10 too. – Prerak Sola Jan 05 '15 at 14:32
1

Sorry about that, when I say inspect it I mean open up Internet Explorers developer tools and inspect the element using that, you can find out more about the IE developer tools here - http://msdn.microsoft.com/en-us/library/dd565627%28v=vs.85%29.aspx – Sean Jan 05 '15 at 14:35
Developer tools are pretty useful for quickly experimenting/troubleshooting, I'd recommend you read up more on them :) Firefox, Chrome and Safari also have developer tools (for that matter, I think almost all browsers do) – Sean Jan 05 '15 at 14:36
It might also be the case that your version of IE is bugged in some way, there are tools you can use for testing webpages in IE amongst other browsers, e.g. http://www.browserstack.com/ – Sean Jan 05 '15 at 14:37
Ok I will make sure to test that when i get home. Will keep you posted – narue1992 Jan 05 '15 at 14:54
@SeanDunwoody I also tested developer tools and if i remove the "background-repeat" feature the image repeats and fills the width of the page? That seems weird – narue1992 Jan 05 '15 at 14:57
@SeanDunwoody I added in the I read about my compatibility for IE being wrong from other places so I used this and it worked. – narue1992 Jan 05 '15 at 15:06

score 1 · Answer 2 · answered Jan 05 '15 at 14:08

1

First off, since you're assigning the image via CSS's background-image property instead of an img element with a src property, your .MainImage img selector does nothing.

As far as the .MainImage, styles, the height and width properties only affect the container element, not the background image. To set the background image size, use this style:

.MainImage {
    background-size: 100% auto;
}

answered Jan 05 '15 at 14:08

mellis481

4,332
12
71
118

Ok thanks for explaining that. I realized that Google accepted this format but my IE 10 doesn't. Can you explain why? @im1dermike – narue1992 Jan 05 '15 at 14:17
@AlyssaCooke: It works fine for me in IE10. Please recheck your code. – mellis481 Jan 05 '15 at 14:34

score 0 · Answer 3 · answered Jan 05 '15 at 15:10

0

In addition to the answers provided, I determined that compatibility for my IE might be an issue.

In the < head > I inputed the following code:

<meta http-equiv="X-UA-Compatible" content="IE=80" />

answered Jan 05 '15 at 15:10

narue1992

325
2
6
20

Header Image won't cover page width

3 Answers3