CSS Repetición de imagen de fondo
CSS background-repeat
De forma predeterminada, la propiedad background-image repite una imagen tanto horizontal como verticalmente.
Algunas imágenes deben repetirse solo horizontal o verticalmente, o se verán extrañas, como esta:
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;
}
Try it Yourself »
Sugerencia: Para repetir una imagen verticalmente, configure background-repeat: repeat-y;
CSS background-repeat: no-repeat
Mostrar la imagen de fondo solo una vez también se especifica mediante la propiedad background-repeat:
Ejemplo
Mostrar la imagen de fondo solo una vez:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Try it Yourself »
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 interfiera demasiado con el texto.
CSS background-position
La propiedad background-position 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;
}
Try it Yourself »
Las propiedades de repetición y posición de fondo CSS
| Propiedad | Descripción |
|---|---|
| background-position | Establece la posición inicial de una imagen de fondo |
| background-repeat | Establece cómo se repetirá una imagen de fondo |
CSS — Repetición y posición de fondo — Vídeo de W3Schools
Este vídeo es una introducción a la repetición de fondo y posición en CSS.
¡Parte de una serie de videotutoriales para aprender CSS para principiantes!
