Discussion :

[LeStef41]

BOnjour

J'ai un header, une image, qui s affiche sur 100% de la page.
Je le recouvre d'une DIV de classe .header qui applique un linear-gradient
Dans cette DIV j ai un form.
Quand je réduis la largeur de l'écran, le formulaire dépasse des 100% de hauteur et de fait se retrouve sur le blanc de la zone suivante... ( il n y a rien d'autre pour l instant)
si ma classe .header est en min-height : 100%, sur petit écran cela s affiche correctement mais revenu en plein écran, mon filtre s'interrompt sous le formulaire laissant en dessous et avant le bas de page, l'image "toute nue".
J aimerais donc pouvoir sur grand écran que mon filtre ( ma classe .header) couvre 100% de la hauteur et que lorsque je réduis la largeur, le formulaire s affiche toujours avec l image de fond de mon header en arrière plan...
Je suis perdu !
Merci pour votre aide.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 html,
 body {
     width: 100%;
     height: 100%;
     margin: 0 ;
     padding: 0;
 }
 
 header {
     height: 100%;
     width: 100;
     align-items: center;
     background: url(../img/bg5_2.webp) no-repeat center;
     -webkit-background-size: cover;
     background-size: cover;
 }
 
 .header {
     height: 100%;
     width: 100;
     background-color: rgba(0, 0, 0, .2);
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .1));
 }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<header>
    <div class="header">
        <form ...

[mathieu]

essayez peut-être min-height : 100vh; ce qui correspond à 100 % de la hauteur de la fenêtre :
https://developer.mozilla.org/fr/docs/Web/CSS/length

et pourquoi vous mettez une image de fond à "header" si le but de la recouvrir complètement avec le formulaire ?

[LeStef41]

Merci pour votre réponse
pour le 100vh mais j ai toujours le même problème.


mon but n'est pas de recouvrir totalement l image de fond par le formulaire...
le header contient 2 colonnes, celle de gauche du texte et celle de droite un formulaire.
Donc en réduisant la largeur la colonne texte est visible avec l image de fond t le formulaire aussi sur sa partie haute mais le bas déborde.
La solution serait peut être, sur petit écran, de ne laisser que le texte sur l'image de fond et n afficher le formulaire qu'n dessous... mais ça non plus, je ne sais pas faire...

[mathieu]

montrez nous un code de test avec les zones html pour qu'on puisse tester directement.

[LeStef41]

J ai finalement demandé à Poe (une app IA) et voici le resultat parfaitement fonctionnel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
header {
    position: relative;
    /* Nécessaire pour le positionnement du pseudo-élément */
    min-height: 100%;
    width: 100%;
    background: url(../img/bg1.webp) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}
 
header::before {
    content: '';
    /* Nécessaire pour afficher le pseudo-élément */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Couleur de fond avec transparence */
    z-index: 1;
    /* Assurez-vous que le pseudo-élément est au-dessus de l'image */
}
 
header>* {
    position: relative;
    /* Pour que le contenu soit au-dessus du pseudo-élément */
    z-index: 2;
    /* S'assurer que le contenu est au-dessus de la couleur de fond */
}

merci à tous pour votre aide

[NoSmoking]

Bonjour,

et voici le resultat parfaitement fonctionnel

même si j'ai du mal à voir la relation entre le souci initial et la solution je dirais que certes !!! mais il y a moyen de se passer de l'ajout d'un pseudo-élément avec la propriété background-image qui permet de définir une ou plusieurs « images » comme arrière plan.

Cela simplifie le CSS qui se résume à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
header {
  --cfond: rgba(0, 0, 0, 0.5);
  background-image: linear-gradient( var(--cfond),  var(--cfond)), url(../img/bg1.webp);
  background-size: cover;
}

Ressource :

• background-image