Documentos de Académico
Documentos de Profesional
Documentos de Cultura
org/espanol/news/imagen-de-fondo-css-con-codigo-de-ejemplo-
html/
Agregar imágenes al fondo de ciertas partes de un sitio web suele ser más atractivo visualmente e
interesante que simplemente cambiar el color de fondo.
Este artículo explica cómo agregar imágenes a tu código HTML y cómo ajustarlas para que se vean
mejor.
El primer paso es asegurarse de crear un directorio (carpeta) de activos para guardar las imágenes
que deseas usar en tu proyecto.
Por ejemplo, podemos crear una carpeta imagen en el proyecto en el que estamos trabajando y
agregar una imagen llamada puestaDeSol.png que queremos usar.
Esta podría ser la página completa (usando el selector body en CSS que apunta al
elemento <body> en nuestro HTML), o solo una parte específica e independiente de la página,
como un elemento de section como en el ejemplo a continuación.
section {
background-image: url("imagen/puestaDeSol.png");
Si la imagen es más pequeña que la etiqueta de la que es fondo, se repetirá para completar la
etiqueta.
section {
background-repeat: repeat;
section {
background-repeat: no-repeat;
}
El valor no-repeat evita que la imagen se repita desde todas las direcciones. La imagen solo se
muestra una vez.
section {
background-repeat: repeat-y;
section {
background-repeat: repeat-y;
Después de agregar una imagen de fondo y evitar que se repita, podemos controlar aún más cómo
se ve dentro del fondo de la etiqueta al mejorar tu posición.
El selector toma dos valores. El primero es para la posición horizontal o dirección x (cuán lejos de
la etiqueta). El segundo es para la posición vertical, o dirección y (hasta dónde baja la etiqueta).
section {
Esto moverá la imagen 20px a lo ancho y 30px hacia abajo en la etiqueta contenedora.
En lugar de píxeles, podemos usar un conjunto de palabras clave como derecha, izquierda, arriba,
abajo o centro para colocar la imagen a la derecha, izquierda, arriba, abajo o en el centro de la
etiqueta.
section {
section {
Para posicionar una imagen con mayor detalle, cabe mencionar que podemos utilizar porcentajes.
section {
Hasta ahora hemos visto valores usados en combinación, pero también podemos especificar un
valor como background-position: 20px; o background-position:center; o background-position:
20%;, que lo aplica en ambas direcciones.
Nuevamente, al igual que las propiedades anteriores mencionadas, toma dos valores. Uno para el
tamaño horizontal (x) y otro para el tamaño vertical (y).
section {
Si no sabemos el ancho exacto del contenedor en el que estamos almacenando la imagen, hay un
conjunto de valores específicos que podemos dar a la propiedad.
background-size: cover; cambia el tamaño de la imagen de fondo para que cubra todo el espacio
de fondo de la etiqueta sin importar el ancho de la etiqueta. Si la imagen es demasiado grande y
tiene una relación mayor con respecto a la etiqueta en la que se encuentra, esto significa que la
imagen se estirará y, por lo tanto, se recortará en sus bordes.
El segundo valor que puede tener la propiedad es background-attachment: fixed;. Esto hace que la
imagen de fondo permanezca en la misma posición, fijada a la página y fijada en la ventana gráfica
del navegador. Esto crea un efecto de paralaje del que puedes ver un ejemplo aquí:
Degradados de fondo
La forma más sencilla de hacer esto es especificar el ángulo. Esto controla la dirección del
degradado y cómo se combinarán los colores. Por último, agregue dos colores que desee combinar
en un degradado para el fondo de la etiqueta.
section {
background-image: linear-gradient(black,white);
Cada uno de los grados anteriores se corresponde con la parte superior, la derecha, la parte
inferior y la izquierda, respectivamente.
section{
En lugar de colores de palabras clave, podemos usar colores hexadecimales para ser más
específicos y tener una gama más amplia de opciones:
section{
También podemos incluir más de dos colores en un degradado, creando diferentes efectos y
esquemas de color.
Conclusión
A partir de aquí, las posibilidades son infinitas y dejan espacio para mucha expresión creativa.
Estos efectos ayudan a que el usuario tenga una experiencia agradable al visitar su sitio web.