jquery add background image with dynamic url

Question

Hi and hope you can help. My JavaScript isn't that hot and I have tried searching but had no luck with find the correct method.

I am trying to add css background-image to a div (.jumbotron) but dynamically change the url depending on the screen size. The image will be picked up from https://unsplash.it where the url can be coded to the dimensions required i.e. https://unsplash.it/200/300

<script type="text/javascript">
function setBackground () {
    $('jumbotron').css('background-image', 'url(https://unsplash.it/' + $(window).height(); + '/' + $(window).width();')');
}
</script>

I hope this make sense and thanks in advance

What is jumbotron? Is it an id/class? It probably needs a selector tag (ex. .jumbotron or #jumbotron). Also, you have an extra > on the closing script tag. — Derek Story
– Derek Story, Commented Sep 8, 2015 at 13:41

Derek Story · Accepted Answer · 2015-09-08 15:00:21Z

2

Assuming jumbotron is an id or class, make sure you give it a selector tag.

You can do something like this to achieve what you are wanting: JS Fiddle

function setBackground() {
    var height = $(window).height();
    var width = $(window).width();
    $('.jumbotron').css('background-image', 'url(https://unsplash.it/' + width + '/' + height + ')');
}

Notes on your original:
jumbotron needed a selector tag (class/id)
$(window).width(); was missing a + after it.
For the Upslash link, the width needs to be before height to work properly.

One more note:
Do you want this function to run on load? If so, be sure to call that function since its not set to run instantly.

edited Sep 8, 2015 at 15:00

answered Sep 8, 2015 at 13:48

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

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

Comments

indubitablee · Accepted Answer · 2015-09-08 13:49:16Z

0

Try removing the semi colon in the string.

function setBackground () {
    $('jumbotron').css('background-image', 'url(https://unsplash.it/' + $(window).height() + '/' + $(window).width()')');
}

Having a semicolon in the middle of the string will force it to stop before the string is completed.

edited Sep 8, 2015 at 13:49

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

answered Sep 8, 2015 at 13:48

kwh71787

5861 gold badge4 silver badges14 bronze badges

Comments

Abhishek sharma · Accepted Answer · 2015-09-08 13:56:20Z

0

Try This:-

<script type="text/javascript">
function setBackground () {
$('jumbotron').css('background-image', 'url(https://unsplash.it/' + $(window).height(); + '/' + $(window).width(); + ')');
}
</script>>

you have missed the '+' sign after width.

answered Sep 8, 2015 at 13:56

Abhishek sharma

714 bronze badges

Collectives™ on Stack Overflow

jquery add background image with dynamic url

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related