Set background-image as a base64 encoded image in JavaScript

# Table of Contents

# Set background-image as a base64 encoded image in JavaScript

To set the background-image property as a base64 encoded image using JavaScript:

Select the image element.
Set its style.backgroundImage property to the result of calling the url() function with the data URL, e.g. url('${dataURL}').

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">bobbyhadz.com</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const dataURL =
  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const box = document.getElementById('box');

box.style.backgroundImage = `url('${dataURL}')`;

set background image as base64 encoded image in javascript

The code for this article is available on GitHub

We used the document.getElementById() method to select the div that has an ID of box.

The next step is to set the style.backgroundImage CSS property of the div to the result of calling the url() CSS function with the data URL.

The url() function takes an absolute URL, a relative URL, a blob URL or a data URL as a parameter.

If your base64 encoded string doesn't contain the prefix, make sure to prepend it.

index.js

Copied!
const dataURLWithoutPrefix =
  'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const box = document.getElementById('box');

const prefix = 'data:image/png;base64, ';

box.style.backgroundImage = `url('${prefix}${dataURLWithoutPrefix}')`;

The code sample adds the data:IMAGE_TYPE;base64, prefix to construct the data URL.

# Set background-image to a base64 encoded image on click in JavaScript

The same approach can be used to set the background-image property to a base64 encoded image when a button is clicked.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">bobbyhadz.com</div>

    <br />
    <br />

    <button id="btn">Click</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const button = document.getElementById('btn');

button.addEventListener('click', () => {
  const dataURL =
    'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

  const box = document.getElementById('box');

  box.style.backgroundImage = `url('${dataURL}')`;
});

set background image to base64 encoded image on click

The code for this article is available on GitHub

We added a click event listener to the button element to set the background-image property on the div to a base64 encoded image when the button gets clicked.

The same approach can be used to toggle the background-image of the element.

index.js

Copied!
const button = document.getElementById('btn');

button.addEventListener('click', () => {
  const dataURL =
    'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

  const box = document.getElementById('box');

  if (box.style.backgroundImage) {
    box.style.backgroundImage = '';
  } else {
    box.style.backgroundImage = `url('${dataURL}')`;
  }
});

toggle background image with base64 encoded image

# Set background-image to a base64 encoded image using classes

You can also use a class to set the background-image property to a base64 encoded image.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">bobbyhadz.com</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Here is the code for the style.css file.

style.css

Copied!
.background-red-dots {
  background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

box.classList.add('background-red-dots');

set background image to base64 encoded image using classes

The code for this article is available on GitHub

Make sure to load the .css file in your HTML file.

index.html

Copied!
<link rel="stylesheet" href="style.css" />

The CSS file consists of a single class that defines the background-red-dots class.

style.css

Copied!
.background-red-dots {
  background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

The JavaScript file simply selects the div element and uses the classList.add() method to add the class to the element.

index.js

Copied!
const box = document.getElementById('box');

box.classList.add('background-red-dots');

The same approach can be used to set the background-image to a base64 encoded image when a button is clicked.

Here is the updated HTML code.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box">bobbyhadz.com</div>

    <button id="btn">Click</button>

    <script src="index.js"></script>
  </body>
</html>

And here is the updated JavaScript code.

index.js

Copied!
const button = document.getElementById('btn');

button.addEventListener('click', () => {
  const box = document.getElementById('box');

  box.classList.add('background-red-dots');
});

set background image to base64 encoded image on click with classes

When the button gets clicked, the event handler function is invoked.

The function uses the classList.add() method to add the background-red-dots class to the div element.

The same approach can be used if you need to toggle the background-image property.

index.js

Copied!
const button = document.getElementById('btn');

button.addEventListener('click', () => {
  const box = document.getElementById('box');

  box.classList.toggle('background-red-dots');
});

toggle background image with base64 encoded image using classes

The code for this article is available on GitHub

I've also written an article on how to convert an image or an image URL to base64 in Node.js.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set background-image as a base64 encoded image in JavaScript

# Table of Contents