toda - imagen de fondo html

CSS de tamaño de fondo cubierta y fondo-posición

Question

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

Estoy usando una imagen como imagen de fondo, solo la parte inferior de la imagen es más importante que la superior.

¿Cómo puedo hacer que el fondo suba un poco?

Answer 1

Para que quede claro, los porcentajes de posición de fondo se calculan contra AMBOS la imagen y el contenedor de fondo. Entonces, posición de fondo: 25% 25%; encontraría el punto del 25% para X e Y en el contenedor de fondo y alinearía el punto de 25% y 25% de la imagen sobre ese punto.

Answer 2

Puedes usar:

background-position: center bottom;

Answer 3

Si el fondo es más importante: background-position: bottom;

background-position también permite valores de porcentaje: 0% 0%; por defecto.

El primer valor es la posición horizontal y el segundo valor es la vertical. La esquina superior izquierda es 0% 0%. La esquina inferior derecha es 100% 100%. Si solo especifica un valor, el otro valor será del 50%.

Debes probar background-position: 0% -10%;