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.
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:
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.
Además de añadir una imagen de fondo a tu sitio web, también podrás añadir un video de fondo HTML de forma muy fácil
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/»).
Visualmente el resultado sería este:
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:
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:
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.
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:
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:
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.
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!
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más
Michael Bierut es mucho más que un diseñador; es un educador ejemplar, un escritor locuaz… Leer más
Ver comentarios
Deberias postear mas aportes como este... Muchas gracias Saludos
Muchas gracias por tu comentario. ¡Lo tendré en cuenta!
Excelente, muchas gracias...
Buenos días, Jesús.
Muchas gracias a ti por los comentarios y por la lectura.
¡Un saludo!
Gracias por el aporte, como podría poner una imagen animada o un video corto como tu tienes?
Buenos días, Sebastián. En primer lugar, quería agradecerte la lectura. Sobre tu consulta, podrás poner un video de fondo en tu web siguiendo los pasos que aquí describo. ¡Un saludo!
¿Cómo puedo establecer como background un archivo jpg que esté dentro de mi carpeta "images"?
background-image:url(aqui pones tu imagen jpg o png)
se podria con una svg?
Excelente. Gracias...
Buenos días, Héctor. Muchas gracias por tu comentario. Un saludo
Todo super claro! Muchas gracias
Buenos días, Maqui, y muchas gracias por leernos. ¡Un saludo!
Estimado, buen día.
Y para el caso que les imagen la tengamos en el disco rígido,
Cómo sería en ese caso?
Saludos
Jorge
Muy buen trabajo, se agradece mucho el aporte!
Excelente
Muchas gracias!
No sabes cuanto me ha ayudadado este tuto, un fuerte abrazo y un gran saludo!!
Muchas gracias a tí, Andrés, por la lectura y el comentario. Nos anima a seguir creando contenido. ¡Un saludo!