web-dev-qa-db-fra.com

Comment faire pour que l'image de fond s'adapte à la page entière sans répéter à l'aide de CSS simples?

J'ai une image JPG de taille 1024 x 724. Ma taille de page n'est pas fixée . Mon exigence est la suivante: Si je redimensionne la page, l'image d'arrière-plan doit également être redimensionnée et ajustée à la page.

De plus, je ne souhaite pas conserver les informations relatives aux images dans ma page HTML/JSP. Je veux faire cela en utilisant CSS simple. Je n'utilise pas CSS3. Parce qu'il existe un attribut appelé background-size qui peut étirer l'image à la largeur et à la hauteur de la page. Actuellement, seul Google Chrome le prend en charge. De l'aide ? 

cssbackground-image
19
User 1034

Vous ne pouvez pas redimensionner les images d'arrière-plan avec CSS2.

Ce que vous pouvez faire est d'avoir un conteneur qui redimensionne:

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>

De cette façon, la div sera assise derrière la page et occupera tout l'espace, tout en redimensionnant si nécessaire. La img à l'intérieur sera automatiquement redimensionnée pour s'adapter à la div.

24
Ben

essayez quelque chose comme

background: url(bgimage.jpg) no-repeat;
background-size: 100%;
16
heximal

Vous pouvez utiliser JavaScript ou CSS3.

Solution JavaScript: Utilisez une balise <img> à positionnement absolu et redimensionnez-la au chargement de la page et à chaque redimensionnement de la page. Méfiez-vous des éventuels bugs lorsque vous essayez d'obtenir la taille de la page/fenêtre.

Solution CSS3: Utilisez la propriété CSS3 background-size . Vous pouvez utiliser soit 100% 100%, soit contain ou cover, en fonction de la manière dont vous souhaitez redimensionner l'image. Bien sûr, cela ne fonctionne que sur les navigateurs modernes.

4
Denilson Sá Maia

En fonction du type d’image que vous avez, il peut être préférable de retravailler le motif afin que l’image principale se fonde sur une couleur unie ou un motif pouvant être répété. Si vous centrez l’image dans la page et que vous avez la couleur unie en tant que fond. 

Voir http://www.webdesignerwall.com/trends/80-large-background-websites/ pour des exemples de sites utilisant des arrière-plans de grande taille ou évolutifs. 

3
james

background: url (bgimage.jpg) no-repeat; background-size: cover;

Cela a fait le tour

0
degee

Ces trois lignes ont toutes fonctionné ensemble pour moi.

background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;
0
Ammad