CODEWITHSUNDEEP
jquerycss
Slawomir Wozniak
Slawomir Wozniak

Reputation: 518

Can't change background image in body using jQuery

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.

Upvotes: 0

Views: 313

Answers (4)

jasinth premkumar
jasinth premkumar

Reputation: 1413

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>

Upvotes: 1

Esteban Torres
Esteban Torres

Reputation: 101

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

Upvotes: 0

Jatin Patel
Jatin Patel

Reputation: 75

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();
    });
});

Upvotes: 0

abney317
abney317

Reputation: 8492

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)');
});

Upvotes: 2

Related Questions