CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackground
Fakt7
Fakt7

Reputation: 187

Change background image of elements on click

I want to change the background images of the body, header, menu and main blocks of my page on link click. First, I'm trying change only body background. My default body background image is assigned in my CSS file: 

html, body {
    height:1100px;
}

body {
    width: 100%;
    background-repeat: no-repeat;
    background-size: auto 1150px;
    background-image: url(../Unnamed%20Site%202/ff%20copy7.jpg);
}

I tried this jQuery function but it doesn't work.

<!DOCTYPE html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Untitled Document</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Your name" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link href="main.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Electrolize'rel='stylesheet' type='text/css' />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <div class="main">
            <div id="home">
               <div class="menu">
                   <script src="jquery.js"></script>
                   <script>
                   $("#home").click(function() { 
                       $("body").css("backgroundImage", "url(sandpaper.png)");
                   });
                   </script>

     ...Some text into main (box)...
             </div>
         </div>
         ...

Upvotes: 0

Views: 1826

Answers (6)

Fakt7
Fakt7

Reputation: 187

Thanks everyone for help. I solved it. I created in my css file BG class:

.bg1 { background: url(sandpaper.png) repeat-x; }

And i used jquery script:

$(document).ready(function(){ 

        $("#link-home").click( function(){ $
        ("body").addClass("bg1");
    });

Upvotes: 0

9997
9997

Reputation: 1357

Your code needs to be: 

$("body").css("background-image", "url('sandpaper.png')");

Also, might I suggest using the .addClass() .removeClass() or .toggleClass functions instead? They offer a cleaner solution.

Upvotes: 1

gmann1982
gmann1982

Reputation: 97

Looks like you will need to change :

$("body").css("backgroundImage", "url(sandpaper.png)");

To:

 $("body").css("background-image", "url(sandpaper.png)");

Upvotes: 0

Morpheus
Morpheus

Reputation: 9065

As simple as that:

$("body").css("background-image", "url(sandpaper.png)");

Or if you want to do your way:

$("body").css({
   backgroundImage: "url(sandpaper.png)"
});

Upvotes: 0

Tomasz Golinski
Tomasz Golinski

Reputation: 728

Try to change:

$("body").css("backgroundImage", "url(sandpaper.png)");

to:

$("body").css("background-image", "url(sandpaper.png)");

Upvotes: 0

Pim Verlangen
Pim Verlangen

Reputation: 387

Set the event-function after the document is ready:

$(document).ready(function() {
    $('#home').click(function() {
        $('body').css('background-image', "url('sandpaper.png')");
    });
});

Upvotes: 2

Related Questions