
Repetición de fondos en CSS
CSS Background Image Repeat
La propiedad background-image
en CSS permite establecer una
imagen de fondo en cualquier elemento HTML. Por defecto, esta imagen se
repite tanto horizontal como verticalmente. A veces, esto no es deseado,
por lo que se puede controlar su repetición.
Ejemplo de código:
body {
background-image: url('fondo.jpg');
background-repeat: repeat;
}
Ejemplo Visual:
Este es un ejemplo de cómo se repite la imagen de fondo en el elemento. La imagen es pequeña y se repite tanto horizontal como verticalmente.
CSS background-repeat
La propiedad background-repeat
controla la repetición de la
imagen de fondo. Se pueden utilizar diferentes valores para ajustar la
repetición:
- repeat: la imagen se repite tanto horizontal como verticalmente (valor por defecto).
- repeat-x: la imagen solo se repite horizontalmente.
- repeat-y: la imagen solo se repite verticalmente.
- no-repeat: la imagen no se repite en ninguna dirección.
Ejemplo de código:
body {
background-image: url('fondo.jpg');
background-repeat: repeat-x;
}
Ejemplo Visual - Repeat:
Este es un ejemplo donde la imagen se repite en ambas direcciones, horizontal y vertical.
Ejemplo Visual - Repeat-x:
Este ejemplo muestra cómo la imagen de fondo se repite solo en la dirección horizontal.
Ejemplo Visual - Repeat-y:
Este ejemplo muestra cómo la imagen de fondo se repite solo en la dirección vertical.
Ejemplo Visual - No-repeat:
Este ejemplo muestra cómo la imagen de fondo no se repite, solo se muestra una vez.
CSS background-repeat: no-repeat
El valor no-repeat
en la propiedad
background-repeat
evita que la imagen de fondo se repita,
mostrándola solo una vez. Este valor es útil cuando se quiere mostrar
una imagen de fondo única en un contenedor sin repetirse.
Ejemplo de código:
body {
background-image: url('fondo.jpg');
background-repeat: no-repeat;
}
Ejemplo Visual - No-repeat:
Este es un ejemplo donde la imagen de fondo se muestra una sola vez sin repetirse.
CSS background-position
La propiedad background-position
se utiliza para
especificar la posición inicial de la imagen de fondo dentro de su
contenedor. Esta propiedad acepta valores como top
,
center
, y left
, entre otros. También se puede
usar en combinación con porcentajes o unidades como px.
Ejemplo de código:
.mi-div {
background-image: url('https://cdn.pixabay.com/photo/2024/02/26/19/57/dog-8598827_1280.jpg');
background-repeat: no-repeat;
background-position: top right;
}
Ejemplo Visual - background-position: top right:
Este es un ejemplo donde la imagen de fondo está posicionada en la esquina superior derecha del contenedor.
The CSS Background Repeat and Position Properties
Property | Description |
---|---|
background-position |
Sets the starting position of a background image |
background-repeat |
Sets how a background image will be repeated |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias