jQuery .css() does not work with background-url

Question

I'm trying to add a dynamic background using the .css() property of jQuery. The background URL is provided through AJAX:

            function requestbg(cusa) {
                $.ajax({
                    url: 'api/bg.php',
                    type: 'GET',
                    data: {id: cusa},
                    success: function(response) {
                        if(response != "") {
                            var url = response;
                            $("body").css("background-url", url);
                            console.log(response);
                        }
                    }
                });
            }

When changing background-url to background-color, it does work. Weird, because in the console I log the response, and it does return a URL. Figured there might be a space somewhere, checked it multiple times but nothing.

Does anybody know why this would not work?

In CSS there is no such property "background-url". Explain what you mean by "background-url". — mentallurg
– mentallurg, Commented Jun 9, 2018 at 21:51

Carl Edwards · Accepted Answer · 2018-06-09 21:52:17Z

1

background-url is an invalid css property. You're looking for background-image:

The background-image CSS property sets one or more background images on an element.

Adjust your code as so and the follow should work.

$("body").css({ "background-image": 'url(' +url +')' });

answered Jun 9, 2018 at 21:52

Carl Edwards

14.6k12 gold badges70 silver badges131 bronze badges

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

1 Comment

J. Doe Over a year ago

I've got it working. Thanks for the help and explanation, it's appreciated :)

Dacre Denny · Accepted Answer · 2018-06-09 21:45:46Z

0

Try this:

$("body").css({ "background-image": 'url('+url+')'});

answered Jun 9, 2018 at 21:45

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

2 Comments

J. Doe Over a year ago

That indeed seems to work perfectly. Just for future reference, is there any particular reason why my code wouldn't work and this does?

Dacre Denny Over a year ago

Sorry about that , currently on my phone answering via app. In short, 'background-url' is not a case property. 'background-image' is what you should be using, supplying a value matching the required format 'url(your_image_url)'. Hope this clarifies my answer a bit

Collectives™ on Stack Overflow

jQuery .css() does not work with background-url

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related