Je n'arrive pas à appliquer un overflow-y
chamoismignon
Messages postés
73
Date d'inscription
Statut
Membre
Dernière intervention
-
chamoismignon Messages postés 73 Date d'inscription Statut Membre Dernière intervention -
chamoismignon Messages postés 73 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis sur une page bien basique (backgound-img et titre) et un overflow apparaît bien qu'il soit en hidden. L'image est dans une div car c'est un fond animé. Tout est ci-dessous. Merci beaucoup ;)
HTML :
<div id="fond_nico"> <header class="header"> <div id="nav"> <ul> <li><a href="./index.html">HOME</a></li> <li><a href="./about.html">ABOUT</a></li> <li><a href="./photos.html">PHOTOS</a></li> <li><a href="./videos.html">VIDEOS</a></li> <li><a target="_blank" href="https://www.tumblr.com/drvonklafout">ACTU</a></li> <li><a href="contact/formpage.html" target="_blank">CONTACT</a></li> </ul></div></header> <div id="titre"> <h1> NICOLAS </h1></div>
CSS :
#fond_nico { background-image: url("../img/test.jpg") no-repeat center center; width: 100%; margin-bottom: 100%;overflow: hidden !important; /* important declaration (preferred) */}
#titre {left: 50px; position: fixed; float: left; bottom: -2%; color: white;}
#titre h1 {font-size: 10vw; line-height: 8vw; opacity: 0.3;}
header {
margin: 0 auto;
}
A voir également:
- Yasmine vient d’installer une application lampe de poche. elle a choisi celle qui demande un accès minimal à son smartphone en comparant ces deux applications :
- Yasmine vient d’installer une application lampe de poche. elle a choisi celle qui demande un accès minimal à son smartphone en comparant ces deux applications : lampe torche gratuit sans publicité lampe torche gratuit puissante quelles sont les catégories d’autorisations demandées par l’application choisie par yasmine ? - Télécharger - Vie quotidienne
- Nommez une application d'appel vidéo ou de visioconférence - Guide
- Desinstaller application windows - Guide
- Comment supprimer une application préinstallée sur android - Guide
- Comment installer une application sur samsung sans play store - Guide
2 réponses
Bonjour !
L'IA qui aime les défis est là !
Il y a une erreur dans votre CSS, spécifiquement dans la propriété "background-image". Vous essayez d'appliquer des propriétés de position et de répétition d'image de fond comme si elles étaient des valeurs d'une URL d'image. C'est incorrect. Les propriétés de position et de répétition d'image de fond doivent être déclarées séparément comme ceci :
```
#fond_nico {
background-image: url("../img/test.jpg");
background-repeat: no-repeat;
background-position: center center;
width: 100%;
margin-bottom: 100%;
overflow: hidden !important;
}
```
N'oubliez pas également que la propriété "overflow: hidden !important" n'empêche pas un élément d'être plus grand que sa hauteur ou largeur définie; cela signifie simplement que tout contenu dépassant sera coupé et non visible. Donc, si vous avez une image très grande dans "#fond_nico", elle débordera toujours, mais le débordement ne sera pas visible.
J'espère que ces informantions seront utiles pour régler votre problème.
L'IA qui aime les défis est là !
Il y a une erreur dans votre CSS, spécifiquement dans la propriété "background-image". Vous essayez d'appliquer des propriétés de position et de répétition d'image de fond comme si elles étaient des valeurs d'une URL d'image. C'est incorrect. Les propriétés de position et de répétition d'image de fond doivent être déclarées séparément comme ceci :
```
#fond_nico {
background-image: url("../img/test.jpg");
background-repeat: no-repeat;
background-position: center center;
width: 100%;
margin-bottom: 100%;
overflow: hidden !important;
}
```
N'oubliez pas également que la propriété "overflow: hidden !important" n'empêche pas un élément d'être plus grand que sa hauteur ou largeur définie; cela signifie simplement que tout contenu dépassant sera coupé et non visible. Donc, si vous avez une image très grande dans "#fond_nico", elle débordera toujours, mais le débordement ne sera pas visible.
J'espère que ces informantions seront utiles pour régler votre problème.
Je confirme :
Ta syntaxe
background-imageest incorrecte dans ton CSS :#fond_nico {
background: url("../img/test.jpg") no-repeat center center;
background-size: cover;
width: 100%;
margin-bottom: 100%;
overflow: hidden !important;
}
Aussi, Le
float: leftn’a aucun effet utile ici avecposition: fixed, et ça peut perturber la mise en page. Supprime simplement lefloat.