Set Div Background Image from Image Source with jQuery

Posted on June 28, 2015 in jQuery/JavaScript Category with Easy Difficulty

In this simple tutorial you will learn how to take the source link from an image tag (using a variable) and add it as a background image to any div with a class name using jQuery and some CSS to display the image correctly.

Video Tutorial

HTML Sample Structure

To have an idea about what we are going to do here, I will write below the html part and explain the whole process to understand how to set div background image using the link source of an image.

<div class="backgroundDiv">
	<span>This is just an empty div where the image link should be as background image in this container.</span>

<div class="imageDiv">
	<img src="sunset.jpg" alt="" width="1920" height="1151" />

So, in the example above we have an empty container with a text and one container with an image. That image we will use it to add to our div background image.

Basic CSS Structure

Because we will add a background image to an empty container (or with any text inside) you can style the background as you want. I will recommend you to use background-size: cover to stretch the image with 100% width and automatic height.

.backgroundDiv {
	background: #ccc;
	background-position: center center;
	background-size: cover;

Set Div Background Image with jQuery

We will take the image link from its src attribute and store it inside a variable. After that we will simply use the jQuery css() function to set div background-image property (it will insert the css inline). Check the code below:

// store the image link inside a variable from 'src' attribute
var getImageSrc = $('.imageDiv img').attr('src');

// add div background image using the variable above
$('.backgroundDiv').css('background-image', 'url(' + getImageSrc + ')');

Set Div Background Image from Image Source with jQuery

Remove the Div with Image or Hide it with CSS

If you want to remove the other div together with the image, you can use the remove() function from jQuery. Just place this code under the existing one.


Or you can hide the div using CSS and also you can remove it in the same time. This will fix the disappearing problem from your content, so this container won't be visible when the page is loaded.

.imageDiv {
	display: none;


This solution can be handy when you don't have access to your html source and you are limited. It will help you to do the trick if you have an image widget and you want to add it to div background image somewhere else in another container. Something like a dynamic content with jQuery.

View Demo

Download Files

Related Articles
  1. daPerley says:

    Really nice code, would be nice to see it working with several of such div’s though, at the moment if theres more than one “group” all the div’s get the image of the first one.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

2 + = four

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.