web-dev-qa-db-fra.com

Couverture et taille de l'arrière-plan CSS

HTML:

#backgroundproduct {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  z-index: 12;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: top;
}
<div id="backgroundproduct" style="background-image: url(http://example.com/example.jpg)">

J'utilise une image comme image de fond, seule la partie inférieure de l'image est plus importante que le haut.

Comment faire monter un peu l'arrière-plan?

htmlcsscss3background-image
27
Ivo

Si le fond est plus important: background-position: bottom;

background-position permet également des valeurs en pourcentage: 0% 0%; par défaut.

La première valeur est la position horizontale et la deuxième valeur est la verticale. Le coin supérieur gauche est 0% 0%. Le coin inférieur droit est 100% 100%. Si vous ne spécifiez qu'une seule valeur, l'autre valeur sera de 50%.

Tu devrais essayer background-position: 0% -10%;

40
Stéphane Bruckert

Vous pouvez utiliser:

background-position: center bottom;
7
vivek

Juste pour être clair, les pourcentages de position d'arrière-plan sont calculés par rapport à la fois à l'image et au conteneur d'arrière-plan. Donc, position de fond: 25% 25%; trouverait le point 25% pour X et Y sur le conteneur d'arrière-plan et alignerait le point 25%, 25% de l'image au-dessus de ce point.

1
m b