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


88

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.


Bien sûr, vous pouvez utiliser JavaScript pour le faire de manière dynamique, mais ce serait probablement pire que les hacks CSS suggérés par le lien de gabriel1836.
Jason Bunting

Pour conserver le rapport hauteur / largeur de l'image, vous devez utiliser "background-size: cover;" ou "background-size: contain;". J'ai construit un polyfill qui implémente ces valeurs dans IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi

Réponses:


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

Cela fonctionne également comme des balises de style dans les éléments html ou dans les fichiers css.
Nathan

2
c'est la meilleure solution qui soit.
AFD

1
Quelle est la différence entre la couverture et 100% 100%?
Pacerier

4
100% 100% ne conserve pas le rapport hauteur / largeur de l'image d'origine. 'cover' redimensionne l'image, tout en préservant son rapport hauteur / largeur intrinsèque (le cas échéant), à la plus petite taille de sorte que sa largeur et sa hauteur puissent couvrir complètement la zone de positionnement d'arrière-plan. Vous pouvez également utiliser «contenir» pour mettre l'image à l'échelle, tout en préservant son rapport hauteur / largeur intrinsèque (le cas échéant), à la plus grande taille de sorte que sa largeur et sa hauteur puissent tenir dans la zone de positionnement de l'arrière-plan.
Mike737

"-webkit-background-size: cover;" n'est pas une propriété CSS3 valide.
VoidKing


8

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.


Pour ceux qui ne veulent PAS garder le rapport hauteur / largeur!
BillyNair

6

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


1
J'ai vu cette technique en action il y a au moins dix ans. Je ne peux pas imaginer que cela ne fonctionnerait pas encore maintenant.
paupière

5

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

4

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

3

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

3

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
Vous avez besoin debackground-size: 100% 100%;
Sablefoste

Je ne sais pas quel navigateur vous utilisez, mais ce que j'ai dit fonctionne pour moi dans Firefox et Chrome.
Badar le

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

0

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.


0

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

2
Bienvenue à SO! Pour rédiger une meilleure réponse, ajoutez un raisonnement expliquant pourquoi cela fonctionne et montrez le code en action. Vous pouvez également lire sur la rédaction d'une bonne réponse .
displacedtexan

0

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:

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


-1

Ça marche pour moi

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.