Étirer l'image de fond sur la fenêtre uniquement

12 juillet 2019 à 18:18:45

Bonjour / Bonsoir,

Je débute un peu en CSS et j'aimerais placer une image que j'aime bien en background. Le problème c'est qu'elle ne fait pas exactement les dimensions de ma fenêtre.

J'ai donc essayé avec background: cover, à gauche à droite et en haut pas de problème ça marche mais j'ai l'impression que cela l'étire jusqu'en bas de l'écran, et non pas de la fenêtre du navigateur. C'est-à-dire qu'une partie du bas de l'image est cachée par la marge de mon bureau Windows. Sauriez-vous comment y remédier ?

C'est vrai que c'est déjà pas mal comme ça, mais je me pose la question pour d'autres images éventuelles, et puis aussi je me demande comment font les designers de sites web pour que l'image rentre uniquement dans la fenêtre.

Merci d'avance !

P.S : Voici le code que j'ai :

Sur la page html :

<body class="home-background">

(J'ai mis une class à cette balise parce que je ne veux cette image que pour une page en particulier, je ne sais pas si on peut faire autrement ?)

Sur la page css :

.home-background
{
	background-image: url("imagedefond.jpg");
	background-size: cover;
}

ChrisLebure

12 juillet 2019 à 18:31:59

Bonjour,

background-size: cover;

tronque l'image de fond la plupart du temps, elle l'adapte aux dimensions du viewport, qui n'a quasiment jamais les mêmes proportions que l'image elle-même. Si l'image n'était pas tronquée et si elle avait les mêmes dimensions que le viewport, elle serait déformée ...

Lauvrann

12 juillet 2019 à 20:16:40

Merci ChrisLebure pour ta réponse.

Justement, imaginons que je veuille absolument qu'elle rentre dans ce qui doit s'appeler comme tu l'as dit le viewport, quitte à modifier les proportions de l'image et donc à la déformer, comment fait-on ?

ChrisLebure

12 juillet 2019 à 23:07:53

L'idée est saugrenue mais pourquoi pas ... j'ai fait un test, c'est marrant

Quelque chose comme

background-size:100% 100%;

à condition que le contenant occupe tout l'espace, genre 100vh de hauteur (toujours se demander : 100% de quoi? en l'occurrence, 100% de la largeur et de la hauteur de l'élément

tout savoir sur background-size, explore et fais des essais :

https://www.w3schools.com/csSref/css3_pr_background-size.asp