[Résolu] Background image sur toute la largeur de l'écran

Bonjour,

Je souhaite appliquer une image sur toute la longueur de l'écran. Pour cela, j'utilise cette ligne de css :

background: transparent url("monimage.jpg") no-repeat scroll 0 0 / 100% auto;

L'image applique bien toute la largeur de l'écran, et reste proportionnelle lorsque j’agrandis/rétrécie de navigateur. Par contre, c'est la hauteur qui pause problème. En effet, je n'arrive pas à forcer la div contenant cette image à prendre la hauteur de l'image. Cela fonctionne évidement en donnant une valeur fixe, mais je veux ma div prenne la taille effective de mon image !

Petit exemple sous paint pour illustrer ce que j'aimerai :

http://img15.hostingpics.net/pics/439777alsa.png

Le but est de faire que la "suite" soit toujours à la même distance en dessous de l'image, que l’écran soit très serré comme sur le premier shéma (l'image sera donc petite) ou large comme le second (l'image sera grande)

Merci de votre aide
Modifié par Clampu (12 Nov 2015 - 18:53)

Bonjour,

Moi je créerais une div dont la hauteur serait gérée comme ceci :

.test {
    width: 100%;
    height: 0;
    margin: 0;
    padding-bottom: 100%; // @note La valeur à modifier est ici (100% pour un ratio "carré", 50% pour 1/2, 56.25% pour du 16/9ème, etc...)
}

Exemple en ligne pour différents ratios.

J'appellerais ensuite l'image sur la div via un background-image et j'appliquerais un background-size: cover afin que l'image prenne toute la place dans la div...

Exemple en ligne ratio + background-image.
Modifié par Olivier C (12 Nov 2015 - 21:30)

Dans sont cas à lui, si je comprend bien sont schéma il ne faut pas oublier d'appliquer une hauteur adéquat .

Tu souhaite faire un genre de one page ?