Définir la taille de l'image de fond avec CSS ?

Question

Est-il possible de définir la taille de l'image d'arrière-plan à l'aide de CSS ?

Je veux faire quelque chose comme :

background: url('bg.gif') top repeat-y;
background-size: 490px;

Mais il semble que c'est totalement faux de faire ça comme ça...

Answer 1

CSS2

Si vous devez agrandir l'image, vous devez modifier l'image elle-même dans un éditeur d'images.

Si vous utilisez la balise img, vous pouvez modifier la taille, mais cela ne vous donnera pas le résultat souhaité si vous avez besoin de l'image comme arrière-plan pour un autre contenu (et elle ne se répétera pas comme vous semblez le vouloir)...

CSS3 _{^{libérez les pouvoirs}}

Il est possible de le faire en CSS3 avec background-size .

Tous les navigateurs modernes prennent en charge cette fonctionnalité. À moins que vous ne deviez prendre en charge d'anciens navigateurs, c'est la méthode à suivre.
_{<b>Navigateurs pris en charge :</b>}
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) et Chrome 3.0+.

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

En particulier, j'aime le cover y contain des valeurs qui nous donnent un nouveau pouvoir de contrôle que nous n'avions pas auparavant.

Ronde

Vous pouvez également utiliser background-size: round qui ont un sens en combinaison avec la répétition :

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

Cela ajustera la largeur de l'image pour qu'elle tienne un nombre entier de fois dans la zone de positionnement de l'arrière-plan.

---

Note supplémentaire
Si la taille dont vous avez besoin est une taille de pixel statique, il est toujours judicieux de redimensionner physiquement l'image réelle. Cela permet à la fois d'améliorer la qualité du redimensionnement (étant donné que votre logiciel d'image fait un meilleur travail que les navigateurs), et d'économiser de la bande passante si l'image originale est plus grande que ce qu'il faut afficher.

Answer 2

Seules les CSS 3 le permettent,

background-size: 200px 50px;

Mais je modifierais l'image elle-même, de sorte que l'utilisateur ait besoin de charger moins de données, et cela pourrait être mieux qu'une image réduite sans anticrénelage.

Answer 3

Si vos utilisateurs utilisent uniquement Opera 9.5+, Safari 3+, Internet Explorer 9+ et Firefox 3.6+, la réponse est oui. Sinon, non.

El taille de fond fait partie de CSS 3, mais elle ne fonctionne pas sur la plupart des navigateurs.

Pour vos besoins, il suffit d'agrandir l'image actuelle.

Answer 4

Pas possible . Le fond sera toujours aussi grand qu'il peut l'être, mais vous pouvez l'empêcher de se répéter avec background-repeat .

background-repeat: no-repeat;

Deuxièmement, l'arrière-plan ne va pas dans la zone de marge d'une boîte, donc si vous voulez que l'arrière-plan soit uniquement sur le contenu réel d'une boîte, vous pouvez utiliser margin au lieu de padding.

Troisièmement, vous pouvez contrôler où commence l'image d'arrière-plan. Par défaut, il s'agit du coin supérieur gauche d'une boîte, mais vous pouvez le contrôler avec la fonction background-position comme ceci :

background-position: center top;

ou peut-être

background-position: 20px -14px;

Le positionnement négatif est beaucoup utilisé avec Sprites CSS .

Answer 5

Pas trop difficile, si vous n'avez pas peur d'aller un peu plus en profondeur :)

Il y en a un. oublié argument :

background-size: contain;

Cela ne va pas étirer votre background-image comme il le ferait avec cover . Il s'étire jusqu'à ce que le côté le plus long atteigne la largeur ou la hauteur du conteneur extérieur et préserve ainsi l'image.

Edit : Il y a aussi -webkit-background-size y -moz-background-size .

La propriété background-size est prise en charge par IE9+, Firefox 4+, Opera, Chrome et Safari 5+.

- Source : W3 Schools