28106 sujets

CSS et mise en forme, CSS3

Yo, ma section prends pas tout l'espace de l'écran, et ça fait que mon fond d'écran est vu en dessous de ma section et ça laisse un sale aspect (voir screen) vous savez d'où ça peut venir?

upload/1573590030-77403-capture.png

body css code :
body{
    font-family: Sunday, sans-serif;
    margin: 0px;
    padding: 0px;
    background-position: top center;
    background-color: #555555!important;
    background-image: url(../img/fond_marry.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    max-width: auto;
    height: auto;
    
}


section body code :
.section2{
    font-family: Sunday, sans-serif;
    margin: 0px;
    padding: 0px;
    background-position: top center;
    background-image: url(../img/fond1.jpg);
    background-color: #555555!important;
    background-repeat: no-repeat;
    background-size: 100%;
    max-width: auto;
    height: auto;
    line-height: 1;
}

Modifié par Efeelios (12 Nov 2019 - 21:24)
Bonjour,

Selon moi si .section2 est en height: auto il prendra la hauteur de son parent. Il faut par conséquent que le body et ton html soient en height: 100%.
Meilleure solution
Super les gars le soucis semble réglé et le tuto m'a bien servit. Merci à vous deux !
Le problème c'est que cela empêche ensuite d'utiliser la cascade normalement car une propriété déclarée avec !important aura toujours la priorité quoiqu'on fasse. Par exemple tu ne peux plus faire ceci :

.red.section2{
    background-color: red;
}


A moins d'utiliser ensuite !important pour toutes les propriétés ce qui n'aurait plus vraiment de sens.
bacasable a écrit :
Le problème c'est que cela empêche ensuite d'utiliser la cascade normalement car une propriété déclarée avec !important aura toujours la priorité quoiqu'on fasse. Par exemple tu ne peux plus faire ceci :

.red.section2{
    background-color: red;
}


A moins d'utiliser ensuite !important pour toutes les propriétés ce qui n'aurait plus vraiment de sens.


Ouais ça semblait logique finalement xd .. Ty ^^