1485 sujets

Web Mobile et responsive web design

Bonjour,

Je suis confrontée à un soucis sur un site responsive :
Je suis partie d'un thème qui utilise un div vide avec un background image, et un padding-top pour ajuster la taille du div à la taille de l'image. (Je ne sais pas si c'est super propr, déjà...)

j'ai donc

<div class="home"> </div>

et
.home {
    background: url("../image.jpg") no-repeat scroll center 0;
    padding: 590 px 0 0;
}


le soucis c'est qu'en réduisant la taille de l'écran, l'image se réduit aussi, et donc idéalement le padding devrait se réduire aussi, mais non, puisque c'est un padding en pixel, fixe.
Si je met un padding en pourcentage, ça ne fonctionne pas.

Existe-il une solution pour adapter la taille du div à la taille de l'image ?

Merci pour votre aide,
Bonjour,

Lin a écrit :

Si je met un padding en pourcentage, ça ne fonctionne pas.

Il faut spécifier une largeur pour que ça fonctionne :
 width: 100%; padding-bottom: 30%;


L'autre solution c'est de mettre l'image dans le code html.