CODEWITHSUNDEEP
htmlcssimagecover
narue1992
narue1992

Reputation: 351

Header Image won't cover page width

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

Upvotes: 0

Views: 2120

Answers (3)

narue1992
narue1992

Reputation: 351

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" />

Upvotes: 0

Sean
Sean

Reputation: 6499

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/

Upvotes: 2

mellis481
mellis481

Reputation: 4158

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;
}

Upvotes: 1

Related Questions