jQuery hover change background image in fixed pozition

Question

Hello on my project I have a background image

background: url('img/1.JPG') fixed;

I am trying to change this background image using jQuery when a div (".boxy") will be hoverd. Here is what i managed to do in jQuery

$(document).ready(function() {
$(".boxy").hover(
    function()
    {
        $("body").css(??????); //what should i write here in order to change background image in img/2.JPG
    },
    function()
    {
        $("body").css(??????); // what should i write here in order to chage background image in img/1.JPG
    }
);
});

Why dont you add class on hover and remove on mouse out? $("body").addClass("hoverd") and same-wise removeClass("hobved") — jbmyid
– jbmyid, Commented Apr 25, 2014 at 13:23

j08691 · Accepted Answer · 2014-04-25 13:24:20Z

2

$(document).ready(function () {
    $(".boxy").hover(function () {
        $("body").css('backgroundImage', 'url(img/2.JPG)');
    }, function () {
        $("body").css('backgroundImage', 'url(img/1.JPG)');
    });
});

jsFiddle example

answered Apr 25, 2014 at 13:24

j08691

208k33 gold badges269 silver badges281 bronze badges

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

3 Comments

King King Over a year ago

backgroundImage this looks like a property used in javascript rather than a property used in CSS?

j08691 Over a year ago

@KingKing - per the docs, "Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css( "backgroundColor" )."

King King Over a year ago

the upvote sign (up triangle) is orange now. I will toggle it for you to see?

Superdrac · Accepted Answer · 2014-04-25 13:24:02Z

1

$('body').css('background-image', 'url(' + imageUrl + ')');

something like this !

answered Apr 25, 2014 at 13:24

Superdrac

1,20817 silver badges29 bronze badges

2 Comments

Chris Over a year ago

it dosent work how it should be, i have in css "background: url('img/1.JPG') fixed;" but not "background-image: url('img/1.JPG') fixed;" and it should be fixed like in my css

Superdrac Over a year ago

Just remove -image. $('body').css('background', 'url(' + imageUrl + ') fixed');

Toiletduck · Accepted Answer · 2014-04-25 13:31:41Z

1

$('body').css("background", "url('/image.jpg') fixed");

edited Apr 25, 2014 at 13:31

Toiletduck

2511 silver badge14 bronze badges

answered Apr 25, 2014 at 13:24

almo

6,4376 gold badges50 silver badges93 bronze badges

Comments

VF_ · Accepted Answer · 2014-04-25 13:25:39Z

0

Try

$(document).ready(function() {
$(".boxy").hover(
function()
{
    $("body").css("background-image", "url(/img.png)");
},
function()
{
    $("body").css("background-image", "url(/img2.png)");
}
);
});

answered Apr 25, 2014 at 13:25

VF_

2,65319 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery hover change background image in fixed pozition

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related