Cómo agregar una imagen de fondo en HTML
La utilización de imágenes como fondo en sitios web es algo naturalmente atractivo para el diseño de la página, es una de las prioridades que tienen los desarrolladores web. Al mismo tiempo, es extremadamente importante tener un sitio web que se cargue rápidamente y mantenga sus propietarios y usuarios contentos. Afortunadamente, HTML ofrece una solución para lograr ambos. Con el código adecuado, puedes establecer una hermosa imagen como fondo para tu pagina web sin sacrificar velocidad de carga. A continuación te contamos cómo.
Pasos para agregar una imagen de fondo en HTML
- Define la Etiqueta Body
- Busca una imagen para tu fondo
- Subir la imagen a tu servidor de Web
- Introduce la imagen en el fondo del Documento HTML
- Ajusta los parámetros de la imagen
Definir la Etiqueta Body
La primera etapa para agregar una imagen en el fondo de tu página HTML es definir la etiqueta body. Esto se logra a través de un código como este:
En este ejemplo, seleccionamos imagen.jpg como la imagen de fondo, y la ubicaremos en la carpeta raíz de tu servidor. El servidor lee la etiqueta de fondo y muestra la imagen en la pantalla.
Busca una imagen para tu fondo
La segunda etapa para agregar una imagen de fondo a tu página web es identificar una imagen que se destaque y sea un buen fondo para el sitio. Existen muchas imagenes gratuitas disponibles en internet, o puedes diseñar tu propia imagen. Lo importante es tener una imagen de calidad para compensar el contenido del sitio.
Subir la imagen a tu servidor de Web
Para que la imagen se muestre correctamente, debes subirla a tu servidor, específicamente en la carpeta raíz, donde está el documento HTML al que la estás añadiendo. Algunos servidores web, como GoDaddy y Hostgator tienen herramientas que facilitan esta tarea. Si no, puedes acceder directamente al cPanel de tu servidor y subirla manualmente.
Introduce la imagen en el fondo del Documento HTML
Una vez la imagen se encuentre en el servidor, debes abrir el documento HTML y definir la etiqueta body tal como mencionamos en el paso uno. Por ejemplo, suponiendo que la imagen se encuentra en la carpeta raíz del servidor, el código podría ser similar a esto:
Ajusta los parámetros de la imagen
Por último, la etiqueta body te permite ajustar ciertos parámetros para personalizar la imagen, como su posición, el tamaño, el formato y la repetición. Esto se logra añadiendo algunos atributos al código:
- background-size: Establece el tamaño de la imagen. Por ejemplo, background-size: 750px 500px;
- background-repeat: Indica si la imagen se repite en el ancho y/u alto de la página. Por ejemplo, background-repeat: no-repeat;
- background-attachment: Establece si la imagen desplaza junto con el contenido o no. Por ejemplo, background-attachment: fixed;
- background-position: Indica la posición de la imagen en el fondo. Por ejemplo, background-position: left bottom;
Si tienes alguna duda, consulta nuestra documentación completa para Agregar una imagen de Fondo en HTML.
¿Cómo poner una imagen en el fondo HTML?
Para añadir una imagen de fondo en una página web, hay usar la propiedad background-image seguida de un valor, en este caso la URL de la imagen que vamos a usar de imagen de fondo. La declaración quedaría algo similar a esto: background-image: url(«/nombre-de-la-imagen. jpg»); Donde «/nombre-de-la-imagen.jpg» deberás cambiarlo por el nombre y ubicación exacta de la imagen que quieres usar como fondo. También puedes usar la propiedad background con sus valores separados para colocar una imagen de fondo como la siguiente: background: url(«/nombre-de-la-imagen.jpg») no-repeat center center fixed; Donde los valores No-repeat center center fixed garantizan que la imagen de fondo no se repita, que se centre, no se mueva y se fije.
¿Cómo poner una imagen de fondo de página en CSS?
Para hacer que una imagen de fondo se muestre fija al desplazar la ventana del navegador, se debe añadir la propiedad background-attachment: fixed . Por último, CSS define una propiedad de tipo «shorthand» para indicar todas las propiedades de los colores e imágenes de fondo de forma directa. Esta propiedad se llama fondo. Su sintaxis es la siguiente:
background: color fondo-imagen posicion repetición borde;
Donde:
•color: es un valor que puede ser en hexadecimal, nombre o como una palabra reservada alterada
•fondo-imagen: es el enlace a la imagen de fondo de la página que se desea mostrar
•posición: define la posición en que se mostrará la imagen de fondo
•repetición: define si la imagen se repetirá o no.
•borde: define los bordes de la imagen.
Por lo tanto, el código CSS para agregar una imagen de fondo fija a una página web sería el siguiente:
background: url(‘url_imagen.jpg’) no-repeat fixed;
Donde url_imagen.jpg es la dirección URL de la imagen que se desea mostrar.