I am having a hard time showing my background image in css. I created a div with a class .top, but every time I use the background-image css property nothing shows up except for color, height and width. I am also use a HTML5 boilerplate from Initializr. If I would to use "
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>woods</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="wrap">
<div class="wrap">
<header>
<h1>Woods</h1>
</header>
</div>
<div class="top">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam.</p>
</div>
<section>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id dictum quam. </p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id dictum quam. </p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id dictum quam. </p>
</article>
</section>
</div>
<div class="wrap">
<footer>
<p>Copyright 2014. All rights reserved.</p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
</html>
body {
background-color: white;
font-size: 62.5%;
line-height: 1.5em;
}
header {
width: 1024px;
height: 150px;
color: #222;
margin: 0 auto;
overflow: hidden;
text-transform: uppercase;
border-bottom: 1px solid black;
}
header > h1 {
margin: 60px 0 0 0;
text-align: center;
font-size: 3.0em
}
.top {
margin: 0 auto;
background-image: url(.../img/forestlargeimage.jpg) no-repeat;
background-color: pink;
width: 1024px;
height: 350px;
}
section {
width: 1024px;
height: auto;
margin: 0 auto 40px auto;
background-color: white;
overflow: auto;
}
article {
float: left;
width: 472px;
height: 450px;
color: #333;
margin: 45px 0 0 25px;
}
article > h1 {
margin: 15px 0 0 15px;
font-size: 1.5em;
color: #333;
text-transform: uppercase;
font-weight: 800;
}
article > p {
margin: 15px 0 0 15px;
font-size: 1.5em;
line-height: 1.5em;
color: #181919;
}
footer {
width: 1024px;
height: 50px;
color: #fff;
margin: 0 auto;
margin-top: -50px;
border-top: 1px solid #222;
overflow: hidden;
clear: both;
}
footer > p {
margin: 15px 0 0 40px;
font-size: 1.2em;
color: #fff;
overflow: hidden;
}
.wrap {
width: 100%;
background-color: #fff;
}
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
In background-image rule you can't write repeat property. The right solution is here, you can choose long or short version. Also check if the image path is true.
.top {
margin: 0 auto;
background-image: url(.../img/forestlargeimage.jpg);
background-repeat: no-repeat;
background-color: pink;
width: 1024px;
height: 350px;
}
or
.top {
margin: 0 auto;
background: pink url(.../img/forestlargeimage.jpg) no-repeat;
width: 1024px;
height: 350px;
}