Je n'arrive pas à appliquer un overflow-y

chamoismignon Messages postés 46 Date d'inscription Statut Membre Dernière intervention -
chamoismignon Messages postés 46 Date d'inscription Statut Membre Dernière intervention - 26 mars 2025 à 13:38

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="/formpage.html"  target="_blank"></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 :
Application mobile - Guide
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
Smartphone sans application préinstallée - Guide
Desinstaller application windows - Guide
Comment installer une application sur samsung sans play store - Guide

2 réponses

Réponse 1 / 2

BoBot Messages postés 5680 Date d'inscription Statut Modérateur Dernière intervention

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éant 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.

Rodmaps Messages postés 3 Date d'inscription Statut Membre Dernière intervention 1

Je confirme :
Ta syntaxe background-image est 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: left n’a aucun effet utile ici avec position: fixed, et ça peut perturber la mise en page. Supprime simplement le float.

Réponse 2 / 2

chamoismignon Messages postés 46 Date d'inscription Statut Membre Dernière intervention 1

Bonjojur Rodmaps,

erreur corrigée ;)

Merci beaucoup et bonne journée.

Discussions similaires

Lampe torche ne s'allume plus

Impossible d'allumer la lampe torche.

Impossible d'ouvrir des liens via mon Samsung A71

Votre réponse

Discussions similaires