jQuery doesn't display background image

Question

I have a newbie question.

I am trying to display a background-image for an a-element. On mouseover the picture should change to different picture. The problem is that the pictures are not being displayed. When I had the code in CSS it worked fine so it must be my function that makes problems.

My code:

jQuery(document).ready(function($){
    $(document).ready(function() {
        $(".person").css({background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/img/person.jpg')});
        $(".person").mouseover(function() {
            $(this).css({background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/img/person-hover.jpg')});    
        });      
    });
    var body = $( 'body' );
});

HTML:

<div class="silhoulettes">
    <a class="person" href="<?php echo get_permalink(41); ?>"></a>
</div>

There are some php wordpress functions between.

Thank you very much in advance!

Is the PHP part processed at least (needs to be set inside a PHP file)? Check in browser what URL you get — A. Wolff
– A. Wolff, Commented Apr 12, 2016 at 10:01
So have you checked what the result is of get_stylesheet_directory_url(), and have you verified that the resulting url is correct? — Glubus
– Glubus, Commented Apr 12, 2016 at 10:01
Not related to the question, but to make thinks neater you can use shorthand php tags within HTML. <?=get_permalink(41);?> — scottevans93
– scottevans93, Commented Apr 12, 2016 at 10:02
You've need to put quotes around the value you're setting in the css() method. Check the console as you've probably got a syntax error — Rory McCrossan
– Rory McCrossan, Commented Apr 12, 2016 at 10:03
Yes, the url was correct. scottevans93 - thank you, very handy. — Dandy
– Dandy, Commented Apr 12, 2016 at 10:22

Rino Raj · Accepted Answer · 2016-04-12 10:36:57Z

2

The correct way of giving css via jQuery is css("propertyname","value"); and css({"propertyname":"value","propertyname":"value",...}); for multiple style.

Try this

$(".person").css({"background-image"," url('<?php echo get_stylesheet_directory_uri(); ?>'/img/person.jpg")});
$(".person").mouseover(function() {
     $(this).css({"background-image", "url('<?php echo get_stylesheet_directory_uri(); ?>'/img/person-hover.jpg")});    
 });

Changes Made

$(".person").css({background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/img/person.jpg')});

to

$(".person").css({"background-image"," url('<?php echo get_stylesheet_directory_uri(); ?>'/img/person.jpg")});

edited Apr 12, 2016 at 10:36

answered Apr 12, 2016 at 10:03

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

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

5 Comments

Dandy Over a year ago

Unfortunately I got an error: Uncaught SyntaxError: Unexpected token , I've read that I can use css in jquery like this to combine elements together: $('p').css({color:green,font-size:14px});

Dandy Over a year ago

It works! You've made some mistakes with apostrophes. Thank you. Could you please comment on this part: $('p').css({color:green,font-size:14px});. Is it correct with jQuery?

Rino Raj Over a year ago

Can you let me know where I can change the apostrophes ? So that I can improve my answer.

Dandy Over a year ago

after the url in the brackets there shoud be ' instead of ", and after that closing bracket there should be "

Rino Raj Over a year ago

@Dandy You have made a mistake. "is necessary while adding css

Sachin · Accepted Answer · 2016-04-12 10:12:35Z

0

Try below syntax

var imgUrl = '<?php echo get_stylesheet_directory_uri(); ?>/img/person.jpg';

$(".person").css("background-image","url("+ imgUrl +")");

answered Apr 12, 2016 at 10:12

Sachin

74 bronze badges

Collectives™ on Stack Overflow

jQuery doesn't display background image

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related