Forum : Image de fond problème CSS

Bonjour à toutes et à tous,

Je suis débutant et je rencontre un blocage avec mon code. J'ai besoin d'aide.

J'ai mis une image de fond dans la section de ma page avec les propriétés ce dessous dans mon code pour que cette image prenne toute la page.
Cependant l'image ne rempli pas la partie basse sous ma DIV #bandeau, il y a un fond blanc qui persiste. Je suis bloqué.
Voici ma page CSS.

*{
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'qintounregular';
    src: url('./fonts/qintoun-webfont.woff2') format('woff2'),
         url('./fonts/qintoun-webfont.woff') format('woff'),
         url('./fonts/qintoun.ttf');
    font-weight: normal;
    font-style: normal;

}
h1{
    color: rgba(110,57,255,0.5); 
    font-size: 24px; 
    font-family: qintounregular; 
}
h2{
    color: black;
}
h3{
    color: black;
}
a{ 
    color: white;
    padding: 20px; 
}
a:hover{
    color: red;
}

section{
    background: url('images/fond.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
nav{
    background: rgba(0,0,0,0.5);
    text-align: center;
    padding: 20px;
}
#bandeau{
    margin-top: 10%; /*la propriété margin permet d'espacer les DIV entre elles*/
    margin-bottom: 10%;
    background-color: rgba(255,255,255,0.5);
}
#contenu{
    text-align: center;
    padding: 2%;
}

Et voici le résultat (sur firefox): au lieu d'une image de fond rempli la section entière (la page entière), la partie sous le bandeau reste blanche.

Quelqu'un a t-il la solution à ce problème SVP?

Resf

je pense que si tu veux que le backgound prennent tous le site tu dois le mettre avec body

ex:

body{
    background: url(img/fon.jpg) center no-repeat
}

Jean Luc B

Salut,

Si je comprends ton problème tu veux une image en background qui remplice la totalité de ta page ?

Je te propose (exemple ici) de créer une div qui contiendra uniquement ton image et ensuite le css :

        <div class="bg-image"></div>

            .bg-image {
                width: 100%;
                height: 100%;
                background-image: url('images/fond.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                position: absolute;
                top: 0;
                z-index: -1;
                opacity: 0.5;
            }

Dis moi ce que tu en penses.

Image de fond problème CSS

2 réponses