Can't change background image in body using jQuery

Question

I'm trying to replace an image in body background using jQuery, but no matter what I do, it doesn't work. Code is almost the same as in other questions or tutorials. Here's CSS which works:

body{
     background-image: url('img/1.jpg');
}

But here's jQuery which doesn't:

$('body').css('background-image', 'url(img/2.jpg)');

and HTML:

 <html lang="pl">
 <head>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
 </script>
 <script src="script.js"></script>
 <meta charset="UTF-8">

 <link rel="stylesheet" href="styles.css">
 <Title> Moja firma </Title>
 </head>
 <body>

 </body>
 </html>

I checked, and jQuery is loaded as well as the file with its code. I also tried putting quotes in url, but also nothing.

It may just be an issue with your value being formatted wrong. try changing it to `'url("img/2.jpg")'` so the value has quotes just like your css rule does. — Taplar, Jul 05 '18 at 15:10
Then can you edit your question to make a working example of the issue? I don't see any other glaring issue with what you have provided. — Taplar, Jul 05 '18 at 15:12
In my code is actually nothing, just clear HTML with CSS and JS embedeed, but I can add it — Slawomir Wozniak, Jul 05 '18 at 15:15
Check your console for errors loading the image. Is your CSS file in the same directory as the JS file or source file where the style/jQuery are located? this will impact the necessary relative path. — mjw, Jul 05 '18 at 15:16
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Taplar, Jul 05 '18 at 15:20

score 2 · Answer 1 · answered Jul 05 '18 at 15:20

Your code seems to work fine when I test the jquery. So I would suggest moving your <script src="script.js"></script> to the bottom of your body tag.

<body>
    stuff for page

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

Otherwise you should check if the page is ready

$(document).ready(function() {
    $('body').css('background-image', 'url(img/2.jpg)');
});

jasinth premkumar · Accepted Answer · 2018-09-21T08:40:36.000

working example just wrap your code inside document.ready funtion

$(function(){
  $("body").css('background-image','url(https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png)');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="pl">
 <head>
 
 <meta charset="UTF-8">

 <link rel="stylesheet" href="styles.css">
 <Title> Moja firma </Title>
 </head>
 <body>

 </body>
 </html>

score 0 · Answer 3 · answered Jul 05 '18 at 15:22

You can try below approach.

I would do this for each page.

<body class="home">
<body class="about">
<body class="contact">

Add below css

.home header { background-image: url(../assets/img/consulting.png"; }
.about header { background-image: url(../assets/img/consulting2.png"; }
.contact header { background-image: url(../assets/img/consulting3.png"; }

On Button click, you can add below js.

$(function(){
    $('#aboutlink').click(function(e){
        $('body').removeClass().addClass('about');

        //your other snippets here

        e.preventDefault();
    });
});

score 0 · Answer 4 · answered Jul 05 '18 at 15:45

What is the event that you are triggering the change. The change will not be aplayed if you dont trigger an event. Example:

When the document is loaded:

$(document).ready(function(){
$('body').css('background-image', "url('img/2.jpg')");
})

When you hit a button

$('button').on("click", function(){
 $('body').css("background-image", "url('img/2.jpg')");
})

Here is a working example

https://codepen.io/mercabrand/pen/KeLLrZ

Check also the event that fits your need

https://developer.mozilla.org/en-US/docs/Web/Events

Can't change background image in body using jQuery

4 Answers4