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.

html css
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

Questions connexes

16 Est-il possible d'appliquer du CSS à la moitié d'un caractère?

De nouvelles questions

1 La liste de réaction n'est pas de nouveau rendu de la table après le tri des éléments dans l'état
2 L'écouteur d'événements Javascript doit cliquer deux fois pour que la fonction fonctionne
1 Pourquoi l'image ne change-t-elle pas de taille lorsque je minimise l'écran?
2 Le sous-menu de la navigation imbriquée ne fonctionne pas comme prévu
1 Changer l'arrière-plan de tous les éléments d'un en-tête et quitter le reste de la page
2 Changer les valeurs d'une combobox en Javascript
3 Pourquoi l'emballage flex-wrap n'est-il pas également?
1 Existe-t-il un moyen d'utiliser le dimensionnement de la boîte: boîte de bordure sans fixation de la largeur?
1 Changer l'élément href juste avant de faire glisser
1 Comment ajouter un effet de mouvement même pour les objets debout
Toutes les questions sur html >

html

HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].

Plus à propos html...