Je sais que c'est une question courante ici sur StackOverflow, mais aucune des réponses précédentes que j'ai vues ne fonctionne. J'ai ce code CSS:

.header{
    padding: 0px 0;
    position: relative;
    display: table;
    background-size: 100% 100%;
    width: 1920px;
    height: 600px;
    background-image: url(backgroundheader.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover

}

Et puis j'ai créé cette balise sur un fichier HTML:

<header id = "header">

</header>

Mais l'image d'arrière-plan n'apparaît pas. les fichiers html et css se trouvent dans le même dossier dans lequel se trouve backgroundheader.png.

0
Lucas Leal 31 déc. 2017 à 08:01

5 réponses

Meilleure réponse

Il existe plusieurs façons d'y parvenir

1ère méthode:

HTML

<header class = "header">
</header>

CSS

.header{
    padding: 0px 0;
    position: relative;
    display: table;
    background-size: 100% 100%;
    width: 1920px;
    height: 600px;
    background-image: url(backgroundheader.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover

}

2ème méthode

HTML

<header id = "header"> 
</header>

CSS

#header{
  padding: 0px 0;
  position: relative;
  display: table;
  background-size: 100% 100%;
  width: 1920px;
  height: 600px;
  background-image: url("backgroundheader.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

3e méthode:

HTML

<header>
</header>

CSS

header{
    padding: 0px 0;
    position: relative;
    display: table;
    background-size: 100% 100%;
    width: 1920px;
    height: 600px;
    background-image: url(backgroundheader.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

Si c'est

  • class => .header
  • id => #header
  • balise d'en-tête => en-tête
1
Lakindu Gunasekara 31 déc. 2017 à 11:22

Changez votre html:

<header class = "header">

</header>

Ou votre sélecteur:

[id="header"] 

Ou #header

BTW. Si vous n'avez qu'un seul en-tête, vous pouvez écrire header comme sélecteur

Vous pouvez également utiliser body>header (pour l'en-tête principal) etc. Vous n'avez probablement pas besoin d'id ni de classes.

BTW. Vous pouvez supprimer ceci:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

https://caniuse.com/#feat=background-img-opts all vert!

0
18C 31 déc. 2017 à 09:05

Vous avez attribué id à l'élément d'en-tête et en css vous avez défini la propriété de la classe d'en-tête.

Remplacez simplement .header par #header

#header {
  padding: 0px 0;
  position: relative;
  display: table;
  background-size: 100% 100%;
  width: 1920px;
  height: 600px;
  background-image: url(https://lorempixel.com/1000/1000/);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
<header id="header">

</header>

Ou id='header' à class='header':

.header {
  padding: 0px 0;
  position: relative;
  display: table;
  background-size: 100% 100%;
  width: 1920px;
  height: 600px;
  background-image: url(https://lorempixel.com/1000/1000/);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
<header class="header">

</header>
2
Temani Afif 31 déc. 2017 à 11:14

Vous devez passer du symbole ** classe au symbole id : **

#header {
  .....
}
<header id="header">

</header>
-1
Mahmod Abu Jehad 31 déc. 2017 à 11:22

Vous avez déclaré une classe css mais vous l'avez utilisée comme identifiant. Donc, ce css ne fonctionne pas.

Essayez ceci dans la page html

<header class= "header">

</header>
1
Temani Afif 31 déc. 2017 à 11:23