I have been practicing my skills with HTML and CSS, attempting to achieve the desired effect of making an image span the width of the page while centered below the header. Despite trying various options to stretch it, I haven't been able to make it work. It seems like there may be a specific solution that I am missing.
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>
UPDATE: encountering issues with image display in IE 10