set second background image?

StackOverflow https://stackoverflow.com/questions/23399999

Question

I'm new to css and I don't know how I should add a background image only for my header. I already have a background image for my whole page, but know I need to set one only for my header. Why won't this piece of code work and how should I solve it.

HTML-code:

<!DOCTYPE html>
<html lang="nl">
<head>
   <title>De fonduepot | Home</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/start.css" />
   <link rel="stylesheet" href="css/styles.css" />
   <link rel="stylesheet" href="css/home.css" />
   <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
</head>
<body>
   <header>
      <div class="wrapper">
         <img class="left" src="images/thefonduepot.png" alt="foto van een fonduepot" />
         <h1>De fonduepot</h1>
         <img class="right" src="images/thefonduepot.png" alt="foto van een fonduepot" />
      </div>
   </header>
</body>
</html>

CSS-code:

body {
background-image: url("../images/houtachtergrond.jpg");
}

.wrapper {
width: 70%;
margin: 0 auto;
}

header .wrapper {
background-image: url("../images/zand.jpg");
}

h1 {
float: left;
font-family: 'Bitter', serif;
font-size: 4rem;
line-height: 3.5rem;
width: 20rem;
text-align: center;
margin-left: 9rem;
color: #8A0810;
margin-top: 1.25rem;
}

header .left {
float: left;
width: 10rem;
}

header .right {
float: right;
width: 10rem;
}
Was it helpful?

Solution

You need to set a width and height for the background image to be contained inside.

http://jsfiddle.net/sS3u8/

header .wrapper {
    background-image: url("../images/zand.jpg");
    width: 100%;
    height: 300px;
    background-size: contain;
}

OTHER TIPS

Instead of this

header .wrapper {
background-image: url("../images/zand.jpg");
}

You could try something like that

header {
background-image: url("../images/zand.jpg");
}

It's a little weird though, i mean the definition of that header .wrapper. The second example which i wrote should set the provided background image for the header tag, and of course it could give you further idea on how to do other things.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top