Change background image of elements on click
Question
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>
...
6 answers
solution1
2 2014-03-21 14:03:26
Set the event-function after the document is ready:
$(document).ready(function() {
$('#home').click(function() {
$('body').css('background-image', "url('sandpaper.png')");
});
});
solution2
1 ACCPTED 2014-03-21 14:04:30
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.
solution3
0 2014-03-21 14:03:27
Try to change:
$("body").css("backgroundImage", "url(sandpaper.png)");
to:
$("body").css("background-image", "url(sandpaper.png)");
solution4
0 2014-03-21 14:03:59
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)"
});
solution5
0 2014-03-21 14:04:09
Looks like you will need to change :
$("body").css("backgroundImage", "url(sandpaper.png)");
To:
$("body").css("background-image", "url(sandpaper.png)");
solution6
0 2014-03-21 15:36:58
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");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.