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

Question

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.

Ne pas avoir beaucoup de chance. Est-ce même possible ou dois-je le faire d'une autre manière en plus d'être une image de fond?

Mon actuel est css:

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

Merci à l'avance. Editer: Je ne tiens pas à maintenir le CSS dans la suggestion de Gabriel, donc je change la disposition de la page à la place. Mais cela semble être la meilleure réponse, donc je la marque comme telle.

Answer 1

Vous n'êtes pas sûr que l'étirement d'une image d'arrière-plan est 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 plus bas, et positionner sur absolute pour que tout autre contenu apparaisse au-dessus.

Dites-nous ce que vous finissez par faire.

Editer: Ce que j'ai suggéré est en gros ce qui est dans le lien de gabriel. Alors essayez ça :)

Answer 2

Vous ne pouvez pas en pur CSS. 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, les chances sont que ça aura l'air horrible de toute façon. Je voudrais essayer soit une image assez 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 qui colle.

Answer 3

développiez réponse @PhiLho, vous pouvez centrer une très grande image (ou une image de 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 à la fond de l'image (si c'est une couleur unie). Cela peut ou peut ne pas convenir à vos objectifs.

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

Answer 4

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

Answer 5

<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> 

Answer 6

En bref, vous pouvez essayer ....

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

Là où je l'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 ça fonctionne bien pour moi.

Answer 7

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; 

Answer 8

Si vous avez une grande image du paysage, cet exemple redimensionne ici l'arrière-plan en mode portrait, de sorte qu'il affiche sur le dessus, en laissant en blanc sur le fond:

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; 
    } 
} 

Answer 9

Le code suivant j'utilise la plupart du temps pour obtenir l'effet demandé:

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

Answer 10

Si vous avez besoin d'étirer votre image d'arrière-plan lors du redimensionnement de l'écran et vous n'avez pas besoin de compatibilité avec les versions des navigateurs plus anciens que cela va faire le travail:

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