Aprenda a cambiar el fondo de un elemento usando CSS
El fondo de un elemento se puede cambiar usando varias propiedades CSS:
background-color
background-image
background-clip
background-position
background-origin
background-repeat
background-attachment
background-size
y la propiedad de taquigrafía background
, que permite acortar las definiciones y agruparlas en una sola línea.
background-color
acepta un valor de color, que puede ser una de las palabras clave de color o un valor rgb
o :hsl
p { background-color: yellow;}div { background-color: #333;}
En lugar de utilizar un color, puedes utilizar una imagen como fondo de un elemento, especificando la URL de ubicación de la imagen:
div { background-image: url(image.png);}
background-clip
Permite determinar el área que utilizará la imagen o el color de fondo. El valor predeterminado es border-box
, que se extiende hasta el borde exterior del borde.
Otros valores son
padding-box
para extender el fondo hasta el borde de relleno, sin el bordecontent-box
para extender el fondo hasta el borde del contenido, sin el rellenoinherit
para aplicar el valor del padre
Al utilizar una imagen como fondo, deberá establecer la posición de la colocación de la imagen utilizando la background-position
propiedad: left
, right
, center
son todos valores válidos para el eje X y top
, bottom
para el eje Y:
div { background-position: top right;}
Si la imagen es más pequeña que el fondo, debe configurar el comportamiento mediante background-repeat
. ¿Debería ser repeat-x
, repeat-y
o repeat
en todos los ejes? Este último es el valor predeterminado. Otro valor es no-repeat
.
background-origin
le permite elegir dónde se debe aplicar el fondo: a todo el elemento incluido el relleno (predeterminado) usando padding-box
, a todo el elemento incluido el borde usando border-box
, al elemento sin el relleno usando content-box
. Fotos Porno y actrices porno
Con background-attachment
podemos adjuntar el fondo a la ventana gráfica, de modo que el desplazamiento no afecte al fondo:
div { background-attachment: fixed;}
Por defecto, el valor es scroll
. Hay otro valor, local
. La mejor forma de visualizar su comportamiento es este Codepen .
La última propiedad de fondo es background-size
. Podemos usar 3 palabras clave: auto
, cover
y contain
. auto
es el valor predeterminado.
cover
expande la imagen hasta que todo el elemento esté cubierto por el fondo.
contain
deja de expandir la imagen de fondo cuando una dimensión (x o y) cubre todo el borde más pequeño de la imagen, por lo que queda completamente contenida en el elemento.
También puedes especificar un valor de longitud y, si es así, establece el ancho de la imagen de fondo (y la altura se define automáticamente):
div { background-size: 100%;}
Si especifica 2 valores, uno es el ancho y el segundo es la altura:
div { background-size: 800px 600px;}
La propiedad de taquigrafía background
permite acortar definiciones y agruparlas en una sola línea.
Este es un ejemplo:
div { background: url(bg.png) top left no-repeat;}
Si usa una imagen y no se pudo cargar, puede establecer un color de respaldo:
div { background: url(image.png) yellow;}
También puedes establecer un degradado como fondo:
div { background: linear-gradient(#fff, #333);}
Tips de CSS
Tal vez te puede interesar:
Fondos CSS
El fondo de un elemento se puede cambiar usando varias propiedades CSS: Aprenda a cambiar el fondo de un elemento usando CSS Aprenda a cambiar el fondo de un e
programar
es
https://aprendeprogramando.es/static/images/programar-fondos-css-2076-0.jpg
2024-11-01
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente