Comment étirer une image d'arrière-plan pour couvrir l'ensemble de l'élément HTML?

J'essaie d'obtenir une image d'arrière-plan d'un élément HTML (corps, div, etc.) pour étirer toute sa largeur et sa hauteur.

Je n'ai pas beaucoup de chance. Est-ce même possible ou dois-je le faire d'une autre manière en plus d'être une image d'arrière-plan?

Mon CSS actuel est:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Merci d'avance.

Edit: Je n'ai pas envie de maintenir le CSS dans la suggestion de Gabriel, donc je change la mise en page de la page à la place. Mais cela semble être la meilleure réponse, donc je la marque comme telle.

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Utilisez la background-sizepropriété: http://www.w3.org/TR/css3-background/#the-background-size

En bref, vous pouvez essayer ceci ...

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Où j'ai utilisé quelques css et js ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

Et cela fonctionne très bien pour moi.

Pas sûr que l'étirement d'une image d'arrière-plan soit possible. Si vous trouvez que ce n'est pas possible ou pas fiable dans tous vos navigateurs cibles, vous pouvez essayer d'utiliser une balise img étirée avec un z-index défini plus bas et une position définie sur absolue pour que d'autres contenus apparaissent au-dessus.

Faites-nous savoir ce que vous finissez par faire.

Edit: Ce que j'ai suggéré est essentiellement ce qui est dans le lien de Gabriel. Alors essayez ça :)

Pour développer la réponse @PhiLho, vous pouvez centrer une très grande image (ou une image de toute taille) sur une page avec:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Ou vous pouvez utiliser une image plus petite avec une couleur d'arrière-plan qui correspond à l'arrière-plan de l'image (s'il s'agit d'une couleur unie). Cela peut convenir ou non à vos objectifs.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Si vous avez besoin d'étirer votre image d'arrière-plan lors du redimensionnement de l'écran et que vous n'avez pas besoin de compatibilité avec les anciennes versions de navigateur, cela fera le travail:

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

Si vous avez une grande image de paysage, cet exemple ici redimensionne l'arrière-plan en mode portrait, de sorte qu'il s'affiche en haut, en laissant vide en bas:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

Le code suivant que j'utilise principalement pour obtenir l'effet demandé:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Vous ne pouvez pas en CSS pur. Avoir une image couvrant toute la page derrière tous les autres composants est probablement votre meilleur pari (on dirait que c'est la solution donnée ci-dessus). Quoi qu'il en soit, il y a de fortes chances que cela ait l'air horrible de toute façon. J'essaierais soit une image suffisamment grande pour couvrir la plupart des résolutions d'écran (disons jusqu'à 1600x1200, au-dessus c'est plus rare), pour limiter la largeur de la page, ou simplement pour utiliser une image de cette tuile.

image{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

Faites simplement un div pour être l'enfant direct de body (avec le nom de classe bg par exemple), englobant tous les autres éléments du corps, et ajoutez ceci au fichier CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Reportez-vous à ce lien: https://www.w3schools.com/css/css_rwd_images.asp Faites défiler jusqu'à la partie qui dit:

2. Si la propriété background-size est définie sur "100% 100%", l'image d'arrière-plan s'étendra pour couvrir toute la zone de contenu

Là, il montre le 'img_flowers.jpg' s'étendant à la taille de l'écran ou du navigateur, quelle que soit la façon dont vous le redimensionnez.

Ça marche pour moi

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}