Establecer imagen de fondo en CSS

1. Utilice background:url() para establecer la imagen de fondo en CSS
2. Utilice la ruta relativa /image/picture para establecer la imagen de fondo en CSS
3. Utilice la ruta relativa ../image/picture para establecer el fondo en CSS

Este artículo presenta métodos para configurar imágenes de fondo en CSS. Discutiremos cómo establecer la ruta de la imagen para que la imagen de fondo se muestre correctamente. Además, discutiremos los diferentes caminos relativos.

Utilice background:url() para establecer la imagen de fondo en CSS

Podemos usar la propiedad background para establecer la imagen de fondo en CSS. La función URL() mantendrá la ruta del archivo de la imagen como imagen de fondo. La propiedad background es la abreviatura de varias otras propiedades asociadas con el fondo. Las propiedades en orden son background-color, background-image, background-repeat, background-attachement y background-position. Usando la propiedad background, podemos asignar los valores para todas estas propiedades de una manera breve.

El punto crítico en el que podemos equivocarnos es al escribir la ruta de la imagen en la función URL(). Debemos estar al tanto de la ubicación de la imagen, y la ruta que está escrita en la función URL() debe ser relativa al archivo CSS. Si escribimos el CSS en el propio archivo HTML, la ruta debería ser relativa al archivo HTML.

En el siguiente ejemplo, la imagen llamada picture está dentro de la carpeta image. La carpeta image y el siguiente archivo CSS style.css se encuentran en la misma carpeta. Por lo tanto, el siguiente código establecerá la imagen de fondo.

La estructura de carpetas se muestra a continuación:

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

Código de ejemplo:

body {
    background: url(image/picture);
}

Utilice la ruta relativa /image/picture para establecer la imagen de fondo en CSS

Podemos usar el formato de ruta de archivo /image/picture para establecer la imagen de fondo en CSS. En tal formato, la imagen se encuentra dentro de la carpeta image. La carpeta image se encuentra en la raíz de la web actual.

En el siguiente ejemplo, hemos establecido la imagen picture como imagen de fondo. La ubicación del archivo CSS no importa en este formato. No es necesario que escriba la ruta del archivo en relación con el archivo CSS. La ruta del archivo se escribe en relación con la raíz de la web actual. Significa que la carpeta image se encuentra en el directorio raíz.

Código de ejemplo:

body {
    background: url(/image/picture);
}

Utilice la ruta relativa ../image/picture para establecer el fondo en CSS

Podemos retroceder a un nivel en una estructura de directorio usando la notación ../. La notación ../ se puede utilizar para escribir la ruta relativa del archivo en la función URL() mientras se configura el fondo en CSS.

Por ejemplo, tenemos un archivo HTML test.html en la carpeta html. La carpeta html se encuentra dentro de la carpeta web. La imagen picture se encuentra dentro de la carpeta image dentro de la carpeta web. En tal estructura de directorio, podemos usar el siguiente código para configurar el fondo.

La estructura de carpetas se muestra a continuación:

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

En el siguiente ejemplo, hemos escrito el CSS en el propio archivo HTML. La notación ../ nos lleva de vuelta a la carpeta web de la carpeta html. Luego busca la carpeta image y luego el archivo picture dentro de la carpeta image. De esta manera, podemos configurar la imagen de fondo en CSS usando la ruta relativa.

Código de ejemplo:

body {
    background: url(../image/picture);
}