Comment étirer une image d'arrière-plan pour qu'elle couvre la totalité de l'élément HTML ?

Question

J'essaie de faire en sorte que l'image d'arrière-plan d'un élément HTML (body, div, etc.) s'étende sur toute sa largeur et sa hauteur.

Je n'ai pas beaucoup de chance. Est-ce que c'est possible ou est-ce que je dois le faire d'une autre manière que l'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 solution et je la marque comme telle.

Answer 1

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

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

Answer 3

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 bien pour moi.

Answer 4

Je ne suis pas sûr que l'étirement d'une image de fond soit possible. Si vous constatez que ce n'est pas possible, ou que ce n'est pas fiable dans tous vos navigateurs cibles, vous pouvez essayer d'utiliser une balise img étirée avec un z-index plus bas et une position absolue pour que le contenu apparaisse par-dessus.

Faites-nous savoir ce que vous finissez par faire.

Edit : Ce que j'ai suggéré est essentiellement ce qui se trouve dans le lien de gabriel. Essayez donc cela :)

Answer 5

J'ai fait une recherche rapide sur Google et j'ai trouvé ce lien :

http://www.htmlite.com/faq022.php