Día 12: Background Image Repeat
La ruta del desarrollador web frontend autónomo🤹♂️
La propiedad - background-repeat
Por defecto, la propiedad background-image repite una imagen horizontal y verticalmente.
Algunas imágenes deben repetirse solo horizontal o verticalmente, o se verán extrañas, como esta:
Ejemplo:
Si la imagen de arriba se repite solo horizontalmente (background-repeat: repeat-x), el fondo se verá mejor:
Ejemplo:
Tip: para repetir una imagen verticalmente, establezca la propiedad
background-repeat: repeat-y;
La propiedad - background-repeat: no-repeat
Para mostrar una imagen de fondo una sola vez, también se especifica mediante la propiedad background-repeat
Ejemplo:
Muestra la imagen de fondo una sola vez:
En el ejemplo anterior, la imagen de fondo se ubica en el mismo lugar que el texto. Estoy seguro de que querrá cambiar la posición de la imagen, para que no perturbe demasiado el texto.
La propiedad - background-position
La propiedad background-position se utiliza para especificar la posición de la imagen de fondo.
Ejemplo:
Ubique la imagen de fondo en la esquina superior derecha:
Resumen
La propiedad background-repeat en CSS se utiliza para repetir una imagen de fondo horizontal y verticalmente, pero también se puede establecer para repetirla solo horizontal o verticalmente, o para mostrarla solo una vez con no-repeat. La propiedad background-position se utiliza para especificar la posición de la imagen de fondo.
Traducido con 💚 desde W3Schools.com