[CSS] Adapter le fond d'écran avec la taille de l'écran

Salut !

J’ai réalisé une petite page d’accueil avec d’un fond d’écran 1366 x 900 pixels.
Le souci, c’est que le fond ne s’affiche pas bien pour d’autres dimensions d’écrans (petits PC, grands écrans…).

Comment résoudre ce problème avec CSS3, sachant que j’ai le même fond d’écran en plusieurs résolutions disponibles ?

page.css :

html
{
    background-image: url('mon-fond.png');
}

C’est pas ma spécialité mais si je dis pas de conneries :

• si tu veux une image de fond qui prenne toute la fenêtre, ça doit être l’image de fond d’une balise qui prend toute la fenêtre
• de base, les balises body ou html ne couvrent pas toute la fenêtre mais prennent la taille de leur contenu
• pour qu’une balise prenne toute la fenêtre, aujourd’hui le moyen le plus simple et direct c’est avec Flex : https://css-tricks.com/boxes-fill-height-dont-squish/

Que voudrais tu plus précisement ? Que l’image s’étire dans une direction ? Qu’elle se répète ? etc… Tes recherches t’ont t-elles emmener vers des pages comme celle-ci https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images ?

Comme l’indique la réponse d’Eskimon background-size:cover;

Ca serait de préciser ce que tu attends et de donner des détails de ce que tu veux. http://jsfiddle.net/ptwyjn8z/

Merci pour vos réponses, c’est exactement ce que je cherchais !

Pour expliquer clairement mon problème :
j’avais un écran aux dimensions 1366 x 768 pixels et un fond d’écran pour ma page web de 1900 x 1200 pixels. Le fond d’écran étant trop grand, il était impossible de le voir complètement sur ma page web. En utilisant la solution proposée background-size: cover;, l’image s’affiche comme attendu !

Bref, merci pour vos réponses !

page.css :

html
{
    background-image: url('mon-fond.png');

    /* Ajuste le fond d'écran aux dimensions de l'écran */
    background-size: cover;

    /* Une autre ligne de code ayant le même effet que celle ci-dessus */
    /* background-size: 100%; */
}

Certaine fois il est judicieux de définir : background-repeat: no-repeat; et background-color: black;