Recently, I came across the CSS property background-size: cover, but I encountered a problem. I want the area behind my navigation on the left to be black. However, when I leave black space in the image itself, it gets cropped off when the image resizes.
Any ideas on how to automatically resize the image while maintaining black space under my left-hand navigation? Suggestions or thoughts?
CSS:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
margin: 0;
height: 100%;
padding-left: 40px;
padding-top: 25px;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#header {
}
#body {
padding-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 100px;
}
.logo {
font-family: Didot;
font-size: 4.5em;
color: #FFF;
}
.main_nav {
list-style-type: none;
margin: 0;
padding: 0;
}
.footer_text {
font-family: Garamond;
font-size: 14px;
color: #FFF;
}
.main_nav li {
margin: 5px;
}
.main_nav li a {
color: #FFF;
text-decoration: none;
font-size: 32px;
font-family: Garamond;
font-variant: small-caps;
}
HTML:
<body>
<div id="container">
<div id="header">
<div class="logo">C</div>
<ul class="main_nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>
</body>