PHP + JQuery setting background images

Question

I've got a php variable, which i pass to a jquery script, which I want to set the background of a certain div. nothing seems to work though.

here's the code:

<?php $post_thumbnail_id = get_post_thumbnail_id(); ?>
<?php $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id ); ?>
<script type="text/javascript">
  $(document).ready(function(){
      $("#event-sub-hero").css('background', 'url("<?php echo $post_thumbnail_url ?>")');
    });
</script>

<!-- SUBPAGE HEADER -->
  <div id="event-sub-hero">
    <div class="container">
      <div class="sub-hero-text col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-12">
        <h2><?php the_title(); ?></h2>
      </div> <!-- end sub-hero-text -->
    </div> <!-- end container -->
  </div> <!-- end sub-hero -->

<!-- END SUBPAGE HEADER -->

This is the code it spits out:

  $(document).ready(function(){
      $("#event-sub-hero").css('background', 'url("http://localhost:8888/babble/wp-content/uploads/2013/10/madmen-night.jpg")');
    });

Does the $post_thumbnail_url variable contain the full pathname to the image file i.e. images/pic1.gif — user2417483
– user2417483, Commented Oct 17, 2013 at 0:33
The images is not showing up. The variable does contain the full pathname too. — Keyfer Mathewson
– Keyfer Mathewson, Commented Oct 17, 2013 at 0:57

BadHorsie · Accepted Answer · 2013-10-17 14:38:10Z

1

Try background-image instead of CSS background

answered Oct 17, 2013 at 14:38

BadHorsie

14.6k31 gold badges127 silver badges196 bronze badges

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

Comments

okawei · Accepted Answer · 2013-10-17 14:43:09Z

0

Have you tried just setting the background of that element with straight up CSS? Maybe the element isn't appearing how you would expect. Also, I'd use background-image as well.

answered Oct 17, 2013 at 14:43

okawei

1,5472 gold badges12 silver badges12 bronze badges

Comments

TimDC · Accepted Answer · 2013-10-17 14:43:31Z

0

Don't use the double quotes, you shouldn't need them, and as someone else mentioned, using 'background-image' is more correct when you are only setting the background image.

answered Oct 17, 2013 at 14:43

TimDC

1214 silver badges11 bronze badges

1 Comment

Keyfer Mathewson Over a year ago

Removed the double quotes. still nothing .

Collectives™ on Stack Overflow

PHP + JQuery setting background images

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related