Add background image to a div via javascript

Question

<div class="splash-image-wrap splash-image">
<img class="splash-image-bg" src="http://mysite-com/image.jpg" alt="image-bg">
</div>

Can you help me with a script that adds the img src url as image background for the wrap div?

I'm trying this but does not work

$(function () {

function updatePageForTopImg(){
    // background image using size cover
    // top background image
    $('.splash-image-wrap').css('background-image', 'url('+$(".splash-image-bg").attr("src")+')').css('background-size' , 'cover').css('background-position' , 'top center');
}
$(window).on('load', function(){
updatePageForTopImg();
});
});

Possible duplicate of how to change the background image of div using javascript? — Josiah Krutz
– Josiah Krutz, Commented Oct 13, 2015 at 7:59
How about doing it in plain CSS? As I can see in your Code you have the src of the image already aviable. If you want to be abble to toggle the background on or off you should implement CSS rules representing the both toggle status. Applying huge chunks of CSS via JS is a bad practise. — Mx.
– Mx., Commented Oct 13, 2015 at 8:02

David Li · Accepted Answer · 2015-10-13 08:15:49Z

2

You want to keep things that are static in your css file, such as background-size and background-position.

JS:

$('.splash-image-wrap').css({
    background-image: 'url(" + $('.splash-image-bg').attr('src') + ")'
});

CSS:

.splash-image-bg {
    background-size: cover;
    background-position: center top;
}

Also as a sidenote, you do not need window.load or document.ready in your code after you have wrapped it like $(function(){}).

window.load is used for waiting for inner frames and images to load. Since you haven't injected your background image yet, you do not need to wait for this to run your code.

Also, document.ready is equivalent to wrapping your function like $(function() {, which you are already doing. You can completely scrap these and have it still work.

edited Oct 13, 2015 at 8:15

answered Oct 13, 2015 at 8:04

David Li

1,3008 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Over a year ago

Exact answer! Deleted my post ;) Did not realized the $ in front of the (function() {}) +1

Andrew Slane · Accepted Answer · 2015-10-13 07:59:09Z

0

Assuming you're loading the jQuery library, the following should work:

$('.splash-image-wrap').css({
    'background-image': 'url(" + $('.splash-image-bg').attr('src') + ")',
    'background-size': 'cover',
    'background-position': 'top center'
});

If not, you'd need to rewrite your function using vanilla JS.

answered Oct 13, 2015 at 7:59

Andrew Slane

714 bronze badges

Comments

Canvas · Accepted Answer · 2015-10-13 08:02:47Z

0

You have the correct code, however not sure why you have a $(window).load. Here is a working version

jsFiddle : https://jsfiddle.net/CanvasCode/rn7ejrke/1/

jQuery

function updatePageForTopImg() {
        // background image using size cover
        // top background image
        $('.splash-image-wrap')
            .css('background-image', 'url(' + $(".splash-image-bg").attr("src") + ')')
            .css('background-size', 'cover')
            .css('background-position', 'top center');
    }

$(function () {
    updatePageForTopImg();
});

answered Oct 13, 2015 at 8:02

Canvas

5,9159 gold badges60 silver badges103 bronze badges

Collectives™ on Stack Overflow

Add background image to a div via javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related