Repetición de imagen de fondo CSS
Repetición de fondo CSS
Por defecto, la background-image
propiedad repite una imagen tanto horizontal como verticalmente.
Algunas imágenes deben repetirse solo horizontal o verticalmente, o se verán extrañas, como esta:
Ejemplo
body
{
background-image: url("gradient_bg.png");
}
Si la imagen de arriba se repite solo horizontalmente ( background-repeat: repeat-x;
), el fondo se verá mejor:
Ejemplo
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Sugerencia: para repetir una imagen verticalmente, configurebackground-repeat: repeat-y;
Repetición de fondo CSS: sin repetición
La propiedad también especifica mostrar la imagen de fondo solo una vez background-repeat
:
Ejemplo
Mostrar la imagen de fondo solo una vez:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
En el ejemplo anterior, la imagen de fondo se coloca en el mismo lugar que el texto. Queremos cambiar la posición de la imagen, para que no perturbe demasiado el texto.
Posición de fondo CSS
La background-position
propiedad se utiliza para especificar la posición de la imagen de fondo.
Ejemplo
Coloque la imagen de fondo en la esquina superior derecha:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}