Image fond d'écran

Bonjour,

Je souhaiterai mettre une image en arrière plan pour ma page d’accueil. Mais l'image n’apparaît jamais entièrement. J'utilise les codes suivants :

body {
background-image: url(../doc/image.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Cela est-il lié à l'image en elle-même ?
Ses dimensions sont les suivantes : 960x685pixels
Sa taille : 592 Ko

Désolée, je n'y connais absolument rien. J'espère obtenir une réponse de votre part !

Bonjour,

Le background-size: cover; va adapter votre image pour qu'elle remplisse totalement la zone dans votre cas, la taille de votre page complète donc le body.
L'image sera automatiquement rognée si besoin pour remplir la zone demandée. Il sera impossible qu'une seule image suffise pour qu'elle soit affichée sur toutes les résolutions d'écrans entièrement.

Il n'y a aucune autre possibilité pour que mon image remplisse tout l'espace ?
J'ai essayé de prendre une image plus grande mais le problème est toujours le même. Aurais-je donc toujours une image rogné ?

C'est un problème de ratio. Ton image à un ratio de 960 / 685 = 1.4
Si l'écran n'a pas le même ratio il y a deux solutions : rogner l'image ou la déformer.

Pour la déformer tu peux utiliser

background-size: 100% 100%

Mais ça risque de pas être beau
Modifié par Alainpre (04 May 2020 - 16:25)