¿Quiéres saber cómo cambiar un background-image con JavaScript? En este artículo te explico cómo hacerlo desde el primer punto y, si quieres profundizar en la temática, te expongo también varios consejos y casos de uso diferentes.
¡Vamos allá!
Índice de Contenidos
Cambiar background-image en Javascript con style.backgroundImage
Entiendo que ya sabes lo que es el background-image y que tienes unas nociones mínimas de JavaScript (de lo contrario, salta a los siguientes puntos), por lo que iré directo al grano.
Si quieres cambiar el fondo de una página web con JavaScript, se puede utilizar el método backgroundImage del objeto style. A continuación te muestro un código HTML completo que puedes copiar en tu editor de código favorito, probarlo y modificarlo a tu antojo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Masters</title>
<style>
#miDiv {
height: 100vh;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="miDiv">Contenido del div</div>
<script>
var miDiv = document.getElementById("miDiv");
miDiv.style.backgroundImage = "url('https://htmlmasters.tech/wp-content/uploads/logo_small.png')";
</script>
</body>
</html>
El código anterior sirve para crear un div con el ID «miDiv», el cual es almacenado con JavaScript en una variable con el mismo nombre. A continuación, se hace uso del objeto style de dicho elemento para acceder a la propiedad backgroundImage, encargada de definir su imagen de fondo.
Por último, se le define como valor la URL del logo de HTML Masters. Tú puedes indicar la URL que consideres. En los próximos puntos te explico más a fondo los componentes del código anterior.
Estructura HTML Básica
En el código anterior, la parte codificada en JavaScript es únicamente el fragmento que se encuentra entre las etiquetas <script> y </script>. Todo lo demás es código HTML, salvo las líneas ubicadas entre las etiquetas <style> y <style>, que se corresponden con código CSS.
Si quieres saber cómo poder escribir esas líneas HTML de forma muy rápida, puedes visitar nuestro artículo sobre cómo crear la estructura básica de HTML con Visual Studio Code. Si lo prefieres, también puedes copiar el código anterior y eliminar las etiquetas <style> y </style> y su contenido, así como el código ubicado dentro de las etiquetas <body> y </body> (sin eliminar las etiquetas).
Objeto style en JavaScript
El objeto style en JavaScript es una forma de acceder y manipular los estilos CSS de un elemento HTML desde el código JavaScript. Cada elemento HTML tiene un objeto style asociado que contiene todas las propiedades de estilo que se pueden modificar a través de JavaScript.
Al acceder al objeto style de un elemento HTML, podemos cambiar los valores de las propiedades CSS, como el color de fondo, el tamaño de fuente, la posición, entre otros. Por ejemplo, si tenemos un elemento con un ID «miElemento» y queremos cambiar su color de fondo, podemos hacerlo así:
var miElemento = document.getElementById("miElemento");
miElemento.style.backgroundColor = "red";
En este código, estamos accediendo al objeto style del elemento con el ID «miElemento» y cambiando su propiedad backgroundColor a «red». Esto cambiará el color de fondo del elemento a rojo.
En resumen, el objeto style en JavaScript es una herramienta útil para manipular los estilos CSS de un elemento HTML de forma dinámica desde el código JavaScript. Con él, podrás crear efectos visuales y mejorar la interactividad de tu página web.
La propiedad background-image
La propiedad background-image es una de las muchas propiedades CSS que se utilizan para establecer el estilo visual de un elemento HTML. Esta propiedad se utiliza para establecer una imagen de fondo en un elemento, lo que puede mejorar significativamente su apariencia y legibilidad.
La sintaxis básica para manipular la propiedad background-image mediante CSS es la siguiente:
selector {
background-image: url('ruta/a/la/imagen.jpg');
}
Aquí, «selector» es el selector CSS para el elemento HTML al que queremos aplicar la imagen de fondo, y «ruta/a/la/imagen.jpg» es la ruta relativa o absoluta de la imagen que queremos utilizar como fondo.
Es importante tener en cuenta que la propiedad background-image solo establece la imagen de fondo para un elemento, pero no afecta a su tamaño, posición o repetición. Para establecer estos atributos, podemos utilizar otras propiedades CSS, como background-size, background-position y background-repeat.
Es por ello que en el código mostrado al principio de la entrada hemos añadido las siguientes líneas CSS para que la imagen de fondo se visualice correctamente:
#miDiv {
height: 100vh;
background-repeat: no-repeat;
}
Cambiar el background-image con JavaScript: conclusión
En resumen, para modificar la imagen de fondo de cualquier elemento HTML empleando JavaScript, simplemente debes acceder a su objeto style y modificar el valor de su propiedad background-image. A partir de ahí, puedes emplear otras propiedades como background-size, background-position y background-repeat para controlar totalmente la apariencia del fondo de dicho elemento HTML.
Espero que este artículo te haya servido de ayuda.
¡Hasta la próxima!
