définir deuxième image de fond?

Je suis nouveau sur css et je ne sais pas comment je devrais ajouter une image d'arrière-plan uniquement pour mon en-tête. J'ai déjà une image de fond pour toute ma page, mais sache que je dois en définir une seule pour mon en-tête. Pourquoi ce morceau de code ne fonctionne-t-il pas et comment dois-je le résoudre?définir deuxième image de fond?

code HTML:

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

Source

2014-04-30 user3275947

Vous devez définir une largeur et une hauteur pour l'image d'arrière-plan à contenir à l'intérieur.

http://jsfiddle.net/sS3u8/

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

Source

2014-05-01 00:02:44

merci cela a fonctionné – user3275947

Au lieu de cela

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

Vous pouvez essayer quelque chose comme ça

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

C'est un peu bizarre, je veux dire la définition de ce header .wrapper. Le deuxième exemple que j'ai écrit devrait définir l'image d'arrière-plan fournie pour l'étiquette d'en-tête, et bien sûr cela pourrait vous donner une idée plus précise sur la façon de faire d'autres choses.

Source

2014-04-30 23:56:12 rsz

ne fonctionne toujours pas – user3275947

pourriez-vous peut-être un exemple de votre mise en œuvre sur jsFiddle? Pour voir ce qui ne va pas (bien sûr, avec les images téléchargées sur un hôte pour les voir aussi) – rsz

Je ne sais pas comment travailler avec ça, je ne peux pas simplement envoyer un fichier zip ou quelque chose? – user3275947

définir deuxième image de fond?

Répondre

Questions connexes