Repetición de fondo de CSS
- Página anterior Imagen de fondo de CSS
- Página siguiente Adhesión de fondo de CSS
CSS background-repeat
Por defecto,background-image La propiedad repite imágenes en ambas direcciones.
Algunas imágenes solo deben repetirse en una dirección horizontal o vertical, de lo contrario, se verán extrañas, como se muestra a continuación:
Ejemplo
body {
background-image: url("gradient_bg.png");
}
Si la imagen superior se repite solo en la dirección horizontal (background-repeat: repeat-x;) para que el fondo se vea mejor:
Ejemplo
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Consejo:Para repetir la imagen verticalmente, configure background-repeat: repeat-y;.
CSS background-repeat: no-repeat
background-repeat La propiedad también puede especificar que la imagen de fondo se muestre solo una vez：
Ejemplo
La imagen de fondo se muestra solo una vez：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
En el ejemplo anterior, la imagen de fondo se coloca en la misma ubicación que el texto. Queremos cambiar la ubicación de la imagen para evitar que la imagen interfiera demasiado con el texto.
background-position CSS
background-position La propiedad se utiliza para especificar la ubicación de la imagen de fondo.
Ejemplo
Colocar la imagen de fondo en la esquina superior derecha：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
- Página anterior Imagen de fondo de CSS
- Página siguiente Adhesión de fondo de CSS
