Background scrollable avec overflow:auto; sous firefox (X)html/CSS

Le 29/07/2013 à 05:21:23
Note: 4/5
Mots clés: background fixe scroll sous firefox internet explorer avec overflow auto en css bug firefox background-atachment scroll

Bonjour,
dans ce tutoriel, je vais vous apprendre comment mettre un arrière plan scrollable dans un div avec las propriété overflow:auto; en CSS.

Lorsque vous mettez la propriété css overflow auto, l'arrière plan du div deviens automatiquement fixe, certains me diront qu'il suffit d'ajouter la propriété background-attachment avec la valeur scroll, mais ça ne fonctionne que sous Internet Explorer O_o

.

Dans ce tutoriel, je vais vous montrer comment faire la même chose mais fonctionnelle dans tout les navigateurs.

L'astuce consiste à séparer le parent du contenu, le parent aura l'overflow:auto; tandis que le contenu aura le contenu et l'arrière plan.

Voici une image qui explique le problème et la solution:

Nous allons aussi mettre le même arrière plan au parent au cas ou la hauteur du contenu ne soit pas assez longue.

Bon voici le code:

<!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">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Mettre un arrière plan scrollable dans un overflow:auto;</title>

        <style type="text/css">

                .parent_1

                {

                        height:120px;

                        overflow:auto;

                        width:200px;

                        background:url('img.png');

                        color:#ffffff;

                }

                .parent_2

                {

                        height:120px;

                        overflow:auto;

                        width:200px;

                        background:url('img.png');

                }

                .ctn_2

                {

                        background:url('img.png');

                        color:#ffffff;

                }

                </style>

    </head>

    <body>

        Arrière plan fixe dans un overflow:auto;<br />

        <div class="parent_1">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br /><br />Doe je noca mi riber joem, quebefi lolibadi doe, bem mocimebeb, hifelefi, fy.<br /><br /><br /> By ref lahe lebi duvoe resapa si li tyfeh be vemev linepofu beb, doe.

        </div><br />

        

        Arrière plan scrollant dans un overflow:auto;<br />

        <div class="parent_2">

                <div class="ctn_2">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br /><br />Doe je noca mi riber joem, quebefi lolibadi doe, bem mocimebeb, hifelefi, fy.<br /><br /><br /> By ref lahe lebi duvoe resapa si li tyfeh be vemev linepofu beb, doe.

            </div>

        </div>

    </body>

</html>

Â

Essayer

Pour toutes questions ou commentaires, contacter moi par MP, en utilisant le formulaire de contact ou encore vous pouvez poser votre problème dans le forum.

Merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile.

Scripts et Tutoriels similaires

Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs

[Tutoriel]Reflet avec GIMP (Reflet avec perspective)

[Tutoriel]Faire un texte enflammé sous photoshop

[Tutoriel]Faire un texte en métal sous photoshop

[Tutoriel]Effet texte plastique, un texte ballon sous photoshop