web-dev-qa-db-fra.com

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

J'essaie d'obtenir une image d'arrière-plan d'un élément HTML (body, div, etc.) pour en étendre la largeur et la hauteur.

Ne pas avoir beaucoup de chance. Est-ce même possible ou dois-je le faire autrement que comme une image de fond?

Mon css actuel est:

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

Merci d'avance.

Edit: je ne tiens pas à maintenir le CSS dans la suggestion de Gabriel, je change donc la mise en page de la page. Mais cela semble être la meilleure réponse, alors je la marque comme telle.

htmlcssbackground-image
85
Fung
<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>
184
Nathan

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

14
Kornel

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é peu de 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.

8
Tamal Samui

Pas sûr qu'il soit possible d'étirer une image de fond. Si vous trouvez que ce n'est pas possible ou n'est pas fiable dans tous vos navigateurs cibles, vous pouvez essayer d'utiliser une balise img étirée avec un index z inférieur, et une position absolue (absolue) afin qu'un autre contenu apparaisse 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 :)

6
Travis Collins

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 ou peut ne pas convenir à vos objectifs.

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

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, le travail sera fait:

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

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%;
}
3
Badar

Si vous avez une grande image de paysage, cet exemple ici redimensionne l’arrière-plan en mode portrait, afin qu’il apparaisse en haut, 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;
    }
}
3
live-love
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;
2
Behnam Mohammadi

Vous ne pouvez pas en CSS pur. Avoir une image couvrant toute la page derrière tous les autres composants est probablement votre meilleur choix (cela ressemble à la solution donnée ci-dessus). Quoi qu'il en soit, il y a de fortes chances que cela ait l'air horrible. Je voudrais essayer soit une image assez grande pour couvrir la plupart des résolutions d'écran (par exemple, jusqu'à 1600x1200, au-dessus, elle est plus rare), pour limiter la largeur de la page, ou simplement pour utiliser une image en mosaïque.

0
PhiLho