28172 sujets

CSS et mise en forme, CSS3

[Résolu] Autoriser le défilement du background dans une div.

Bonjour bonjour!

Voici mon soucis, j'ai dans ma page une div qui a sa propre barre de défilement, div à laquelle j'applique une image de fond.
Mais problème, sous FF et Opéra, le fond ne suit pas le défilement du contenu de ma div.
Même en spécifiant "background-attachment:scroll;", le fond reste fixe.

Sous IE ça fonctionne parfaitement.

Il suffit de faire le test, une banale page contenant <body><div></div></body>, appliquez une image de background sur cette div et autorisé lui le défilement : l'image reste fixe.

Une idée?Une astuce? Smiley rolleyes

Merci d'avance pour votre aide!
Modifié par The_Moye (18 Jun 2008 - 12:50)
Bonjour,

The_Moye a écrit :
Il suffit de faire le test, une banale page contenant <body><div></div></body>

Une banale page avec ce code HTML n'a rien de banal si on ne lui donne pas un Doctype en bonne et due forme. Elle sera alors affichée en mode Quirks, ce qui n'est pas une bonne idée.

Pour le reste, il me semble que le comportement adopté par Firefox et Opera est normal. Le fond reste bien attaché au bloc (background-attachment: scroll;) et non pas au viewport (background-attachment: fixed;).
Si tu veux un fond qui défile dans un bloc de hauteur fixe en overflow: auto, il faut l'appliquer à un second bloc (enfant du premier).

Test rapide:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Page de test</title>
	<style type="text/css" media="screen">
	div.conteneur {
		margin: 30px;
		width: 533px;
		height: 320px;
		overflow: auto;
	}
	div#cont1,
	div#cont2 div {
		background: url(http://www.covertprestige.net/blog/images/2008/xkcd-python.png);
	}
	div p {
		margin: 0;
		font-size: 4em;
		font-style: italic;
		color: rgba(100,200,50,.6)
	}
	</style>
</head>

<body>

<div class="conteneur" id="cont1">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</div>

<div class="conteneur" id="cont2">
	<div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
	</div>
</div>

</body>
</html>
Plop Florent V.

Merci de ta réponse rapide!
Bien sur pour ma page j'ai définie le Doctype, c'était juste histoire de donner la marche à suivre de manière ultra-condensée (2h30 du matin en même temps hein Smiley confused ).

Ton exemple marche niquel, j'avais bien pensé à créer une div enfant, mais pas à appliquer l'overflow sur cet enfant ^^

Comme toujours Alsa nous apporte une réponse clair et rapide!
Merci les utilisateurs!
Sujet clos
Aller à