Agregar imagen de fondo en CSS
- Agregue una imagen de fondo en CSS cuando la imagen y el archivo CSS estén en la misma carpeta
- Agregue fondo en la imagen CSS cuando la imagen, los archivos HTML y CSS estén en la carpeta diferente
Este tutorial presenta cómo agregar imágenes de fondo en CSS. También explicará cuáles son los errores comunes al agregar imágenes de fondo.
Agregue una imagen de fondo en CSS cuando la imagen y el archivo CSS estén en la misma carpeta
Podemos imágenes de fondo en CSS usando la propiedad background-image. Luego, para el valor, podemos usar la función url() donde el nombre de la imagen o la ruta de la imagen es el parámetro. La propiedad debe escribirse después de seleccionar la etiqueta body en el CSS. Esto habilitará la imagen de fondo en todo el cuerpo de la página web. Debemos escribir el nombre de la imagen y la ruta de acuerdo con la estructura de carpetas del HTML, CSS y el archivo de imagen. Explicaremos algunos escenarios de diferentes ubicaciones de imágenes con respecto a los archivos HTML y CSS.
Si la imagen y el archivo CSS se encuentran en el mismo directorio, simplemente podemos escribir el nombre de la imagen en la función url(). Por ejemplo, tenemos la imagen bird.jpg en un directorio. Tenemos un archivo CSS style.css en el mismo directorio; el siguiente código establecerá la imagen de fondo.
Código de ejemplo:
body{
background-image:url(bird.jpg);
}
Además, debemos asegurarnos de que la ruta de archivo relativa de los archivos HTML y CSS sea correcta. Si CSS está escrito internamente en HTML, la imagen y los archivos HTML deben estar dentro del mismo directorio. Si no están en el mismo directorio, la ruta relativa del archivo CSS debe ser correcta en el archivo HTML.
Agregue fondo en la imagen CSS cuando la imagen, los archivos HTML y CSS estén en la carpeta diferente
Supongamos que tenemos una carpeta HTML llamada index.html, un archivo CSS llamado style.css y la imagen llamada bird.jpg. El archivo HTML se encuentra en una carpeta html, el archivo CSS se encuentra en la carpeta css y la imagen se encuentra en la carpeta image. En una estructura de archivo de este tipo, debemos saber cómo debemos dar la ruta relativa del archivo CSS y la imagen para que se muestre la imagen de fondo. En primer lugar, debemos asegurarnos de que los archivos HTML y CSS estén vinculados. El siguiente código vincula el archivo HTML y CSS con la estructura de carpetas indicada anteriormente.
Código de ejemplo:
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
El símbolo ../ denota un paso atrás desde la carpeta actual. Cuando retrocedemos un paso desde la carpeta html donde se encuentra el index.html, llegaremos a la carpeta principal donde se encuentra la carpeta css. Luego, podemos encontrar el archivo style.css dentro de la carpeta css. Ahora, tenemos que proporcionar la ruta relativa de bird.jpg de la misma manera en el archivo CSS.
Como la carpeta image se encuentra un paso atrás del archivo CSS actual, ../ nos llevará de regreso a la carpeta principal. Luego, busca la carpeta image donde se encuentra el bird.jpg. Por lo tanto, podemos configurar la imagen de fondo en CSS sin fallas.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn