CSS es un acrónimo de Cascading Style Sheets. Es un lenguaje de diseño simple pero poderoso que tiene la capacidad de transformar páginas web. En términos simples, agiliza el proceso de hacer que las páginas web sean presentables y atractivas para los usuarios con la ayuda de . En este artículo, entenderemos cómo implementar varias imágenes de fondo en CSS en el siguiente orden:
- Imagen de fondo en propiedades CSS
- Imagen de fondo en CSS
- Repetición de fondo
- Adjunto de fondo
- Posición de fondo
- Imagen de fondo en tamaño CSS
- Color de fondo
Imagen de fondo en propiedades CSS
Hay muchas propiedades que se utilizan para controlar el comportamiento y el posicionamiento de la imagen. Estas propiedades son:
- imagen de fondo
- repetición de fondo
- adjunto de fondo
- posición de fondo
- tamaño de fondo
- color de fondo
Nos familiarizaremos con cada una de estas propiedades y veremos cuándo y cómo usarlas con alguna demostración interesante.
Imagen de fondo en CSS
los imagen de fondo La propiedad como su nombre indica se usa simplemente para indicar y establecer la imagen de fondo a través de un elemento en una página web. Una imagen de fondo por defecto se coloca en la esquina superior izquierda de un elemento.
sintaxis: imagen de fondo: url | none | linear-gradient | radial-gradient
body {background-image: url ('apple.jpg')}fondo usando url
Entendamos los parámetros:
- url: La entrada a este parámetro nos permite especificar una ruta de archivo a cualquier imagen o la URL a la imagen que debe establecerse como fondo. Para declarar más de una imagen, las URL se separan con un delimitador de coma.
body {background-image: url ('apple.jpg')} 
- ninguna: Este es el valor predeterminado de la propiedad y no se representa ninguna imagen de fondo si se especifica su valor.
cuerpo {fondo: ninguno}- gradiente lineal(): La imagen de fondo se establece en un degradado lineal. Se requiere que se especifiquen un mínimo de al menos dos colores para esta propiedad, es decir, de arriba a abajo.
cuerpo {background-color: # 001 background-image: linear-gradient (blanco 15%, transparente 16%), linear-gradient (blanco 15%, transparente 16%) background-size: 60px 60px background-position: 0 0, 30 px 30 px}- gradiente radial (): La imagen de fondo se establece en un degradado radial. Se requiere que se especifique un mínimo de al menos dos colores para esta propiedad, es decir, de centro a bordes.
body {background-color: # 001 background-image: radial-gradient (blanco 15%, transparente 16%), radial-gradient (blanco 15%, transparente 16%) background-size: 60px 60px background-position: 0 0, 30 px 30 px}- gradiente-lineal-repetido (): Repite un degradado lineal. Usemos el mismo ejemplo que vimos anteriormente en el gradiente lineal para repetir el gradiente lineal y ver la diferencia.
body {background-color: # 001 background-image: repeating-linear-gradient (blanco 15%, transparente 16%), repeating-linear-gradient (blanco 15%, transparente 16%) tamaño de fondo: 60px 60px posición de fondo : 0 0, 30 px 30 px}- gradiente-radial-repetido (): Repite un degradado radial. Exploremos el mismo ejemplo que usamos anteriormente en un degradado radial.
body {background-color: # 001 background-image: repeating-radial-gradient (blanco 15%, transparente 16%), repeating-radial-gradient (blanco 15%, transparente 16%) tamaño de fondo: 60px 60px posición de fondo : 0 0, 30 px 30 px}Fondo de reserva
Siempre es aconsejable, como consejo profesional, agregar un color de fondo como opción alternativa. Viene al rescate, especialmente cuando las imágenes de fondo no se cargan o el fondo degradado que configuramos durante el desarrollo no es compatible con algunos de los navegadores antiguos en los que se ve.
Esto no estropea la experiencia del usuario y se puede declarar así:
cuerpo {fondo: url (apple_lost.jpg) rosa}Fondo múltiple
También tenemos la opción de configurar varias imágenes de fondo y, en la mayoría de los casos, se requiere como una imagen de primer plano y de fondo. El orden de la imagen es importante aquí, la imagen que debe estar al frente se declara primero y la imagen que debe estar al final se declara a continuación.
recortar () en java
A continuación se muestra el ejemplo de varias imágenes de fondo:
cuerpo {background-image: url ('small-heart.jpg'), url ('background.jpg')}Repetición de fondo
La propiedad background-repeat se utiliza junto con background-image para definir el comportamiento de repetición de una imagen. Especifica si se repetirá una imagen de fondo y cómo. La imagen de fondo por defecto se repite tanto vertical como horizontalmente.
Los posibles valores son:
- repetir: la imagen se repite tanto horizontal como verticalmente
- no-repeat: la imagen no se repite
- repeat-x: la imagen se repite horizontalmente
- repeat-y: la imagen se repite verticalmente
- espacio: la imagen se repite con espacios pares o espacios entre ellos.
- round: la imagen se repite para llenar el área sin espacios entre ellas.
La sintaxis CSS de la propiedad background-repeat es:
repetición de fondo: repetir | repetir-x | repetir-y | no repetir | espacio | redondear
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Adjunto de fondo
los adjunto de fondo La propiedad se utiliza junto con la imagen de fondo para indicar si la imagen debe desplazarse o no a medida que se desplaza el contenido. Significa que la imagen de fondo debe ser fija o debe desplazarse junto con el documento en relación con la vista de la ventana del navegador. El valor predeterminado es desplazarse.
Los posibles valores son:
- scroll: la imagen se desplaza junto con la página.
- fijo: la imagen no se desplazará junto con la página
La sintaxis CSS para el archivo adjunto de fondo es:
adjunto de fondo: scroll | fijo
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Posición de fondo
los posición de fondo La propiedad se utiliza para indicar la ubicación o el posicionamiento de una imagen de fondo. Los posibles valores son:
- parte superior
- derecho
- fondo
- izquierda
- centrar
- combinación de estos valores (por ejemplo, arriba a la izquierda)
La sintaxis CSS para la posición de fondo es:
posición de fondo: arriba | derecha | izquierda | abajo | centro
body {background-image: url ('heart.png') background-repeat: no-repeat background-attach: scroll}Imagen de fondo en tamaño CSS
Esta propiedad es una de las más útiles ya que nos permite controlar el tamaño de la imagen de fondo. Hay diferentes combinaciones que podemos emplear con esta propiedad y obtener los resultados correspondientes. El valor predeterminado es automático.
Los siguientes valores se pueden usar con background-size:
- auto
- una longitud, altura y anchura de la imagen, p. ej. 20px 40px.
- un porcentaje de altura y ancho de la imagen como porcentaje w.r.t elemento principal, p. ej. 50% 50%.
- centro: alinea la imagen con el centro
- cubrir, escalando la imagen para cubrir completamente el área de fondo.
- contener, escalando la imagen para ajustarla hasta su altura y ancho reales.
La sintaxis CSS para la posición de fondo es:
tamaño de fondo: valor
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contains, 400px 150px}Color de fondo
Esta es la más simple de todas las propiedades en CSS. Aplica colores sólidos al fondo de la página. El valor de esta propiedad se puede especificar en colores (por ejemplo, rojo, azul, etc.), valor hexadecimal y valor RGB.
La sintaxis CSS para el color de fondo es:
color de fondo: valor
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Esto concluye todas las propiedades que podemos usar con el fondo. Siempre podemos probar diferentes combinaciones de las propiedades como vimos en nuestra demostración.
CSS es esencial y debe adquirir habilidades para todos los desarrolladores web front-end. Ayuda a diseñar y estilizar el fondo y a crear sitios web impresionantes y enriquecer la experiencia del usuario. Lo mejor es seguir experimentando y aprovechar al máximo esta tecnología especial de interfaz de usuario, ya que puede hacer maravillas y transformar dinámicamente la página.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo convierte en un experto en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios del blog “Imagen de fondo en CSS” y nos comunicaremos con usted.