Cómo poner una imagen de fondo en HTML

Cómo poner una imagen de fondo en HTML

En la entrada de hoy vamos a ver cómo poner una imagen de fondo en HTML, o mejor dicho, cómo poner una imagen de fondo en CSS. Es una entrada especialmente pensada para usuarios que están iniciándose en el mundo del diseño web. Si perteneces a este grupo, ponte cómodo, ya que ¡comenzamos!

Antes de pasar a detallar cómo poner una imagen de fondo con CSS en HTML te aviso que necesitarás tener nociones básicas de HTML y de sus etiquetas y atributos. Si ya conoces algo sobre cómo programar en HTML y sobretodo en CSS, puedes saltarte directamente el siguiente punto.

Cómo usar CSS

Antes de comenzar, debes saber que hay tres formas, a priori, de darle estilos a tu página web. Las tres formas serían las siguientes:

  • CSS en Hoja de estilos externa.
  • CSS dentro del <head> del documento HTML, usando las etiquetas HTML <style>.
  • CSS en línea.

Durante la entrada, todos los ejemplos que usaré están realizados usando una hoja de estilos externa del documento HTML. De hecho, hacerlo así es lo más recomendable en casi todos los proyectos.

Para dar estilos CSS a tu página web, primero debes apuntar a un selector, que puede ser por ejemplo una etiqueta HTML. También puedes usar un atributo de “clase” o un “id”. A continuación, la declaración de estilos (propiedad + valor), deberás introducirla dentro de unas llaves como las siguientes: { }.

Por lo tanto, en tu código deberás ver algo así:

body {
   /* Aqui se introduce la declaración de estilos */
}   

Con las llaves, definimos que reglas se aplicarán al selector seleccionado. En este caso, hemos elegido una etiqueta HTML (body) como selector.

Colocar una imagen de fondo en una página web

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(“/url-de-la-imagen.jpg/”).

Visualmente el resultado sería este:

Diferentes tipos de imagen de fondo

En el ejemplo anterior hemos visto cómo poner una imagen de fondo en HTML a través de la propiedad: background-image. Junto a esta propiedad, existen además otras que complementan como puedes programar una imagen de fondo en HTML. Las propiedades que puedes usar junto a background-imagen son las siguientes:

  • Background-repeat
  • Background-position
  • Background-attachment

Background-repeat

La propiedad “background-repeat” repite por defecto la imagen de fondo hasta cubrir por completo la superficie del elemento que lo contiene. Por ejemplo, si nuestra página web mide 800px de alto y 800px de ancho, y el fondo de la imagen mide 100x100px, el fondo se repetirá hasta cubrir los 800px.

Los valores que esta propiedad admite son los siguientes:

  • repeat: La imagen de fondo siempre se repetirá hasta llenar el contenedor.
  • repeat-y: Se repite únicamente de manera vertical, es decir en el eje y.
  • repeat-x: Se repite únicamente de manera horizontal, es decir se repetirá en el eje-x.
  • no-repeat: La imagen se muestra, pero no se repite.

Por defecto, esta propiedad tiene el valor “repeat”. Lo habitual, cada vez que usas la propiedad “background-image”, es usar la propiedad “repeat” con el valor “no-repeat”.

En el siguiente ejemplo verás una imagen de fondo que se repite solo en el eje vertical.

Background-position

Si tenemos una imagen de fondo que hemos decidido no repetir a lo largo de todo el contenedor, es posible que esta imagen no cubra la totalidad de la superficie y por tanto, quede espacio libre. En ese caso, es posible determinar la posición de la imagen de fondo mediante la propiedad “background-position”.

También es posible determinar esta propiedad incluso cuando la imagen de fondo ocupe todo el ancho o el alto, pudiendo escoger su posición en el eje vertical u horizontal, dependiendo del caso. Veamos en el siguiente ejemplo como centrar una imagen de fondo en el centro del contenedor:

Background-size

También podemos definir el tamaño que tendrá la imagen de fondo, si esta no se repite y tampoco ocupa la totalidad del contenedor.

Por defecto, el tamaño de la imagen de fondo se mostrará al máximo de su tamaño. Si por ejemplo, la imagen es más grande que el contenedor, solo veremos parte de la imagen. Para solucionarlo, podemos definir el tamaño de la imagen con la propiedad “background-size“, junto a un valor que puede ser indicado con diferentes medidas relativas o absolutas (rem, em, %, picas, cm, px, etc)

En el siguiente ejemplo vamos a ver como poner una imagen de fondo que ocupe la totalidad del contenedor:

Background-attachment

Esta propiedad determina el comportamiento de la imagen de fondo durante el scroll de la página. Esto significa que podemos escoger si el fondo permanecerá estático o acompañara al scroll de la ventana del navegador del usuario. Para dejar la imagen estática, el valor a indicar debe ser: “fixed“. Por el contrario, si queremos que haga scroll, o bien no definimos esta propiedad, o la forzamos con el valor: “scroll“.

Es muy habitual emplear la combinación de fondos con distintos comportamientos o similares.

Conclusión

Como has podido comprobar, poner una imagen de fondo en css es muy fácil. Tan solo necesitas tener un poco de conocimientos previos de css y HTML. Si tienes dudas con alguna de las propiedades no dudes en dejarme un comentario y te reponderé lo más rápido posible.

¡Hasta la próxima!

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Volver al blog