CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nelson McCullough
Nelson McCullough

Reputation: 63

jquery setting background image on load not working

currently im having a decent bit of trouble getting my jquery code to work. I'm trying to make the div load in with the correct background image but it doesnt wanna do so. I cant find out what might be wrong since im pretty new to jquery. I have a container set which needs a background image within the html attr 'srcpost' which contains something like 

url("movies/Napoleon Dynamite/poster.jpg")

Ill post what I have so far, nothing happens on load. just a blank div with no background image :(.

$( '.video_selection' ).on( 'load', function() {
	var backgroundimg = $( this ).attr('srcpost');
	$( this ).css('background-image', backgroundimg);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

Upvotes: 0

Views: 262

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can do like this for trigger load event for div.

$(function(){
        $('div[onload]').trigger('onload');
    });


function changebackground(div) {
	var backgroundimg = $('.video_selection').attr('srcpost');
  //alert(backgroundimg)
	$('.video_selection').css('background-image', backgroundimg);
}

$(function(){
	$('div[onload]').trigger('onload');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' onload="changebackground(this)" vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

Upvotes: 0

Mukyuu
Mukyuu

Reputation: 6759

Please don't use element .onload method: Jquery on() load event on a single element. Might as well use $(document).ready(). Which would render your $(this) targeting window and you must change to element class. Also take care of \ in vidurl.

/*$(window).on( 'load', function() {
	var backgroundimg = $('.video_selection').attr('srcpost');
  console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
	$('.video_selection').css({'background-image': backgroundimg});
}); // window load will wait for all the content (images etc) to load before starting.  */

$(document).ready(function(){
	var backgroundimg = $('.video_selection').attr('srcpost');
  console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
	$('.video_selection').css({'background-image': backgroundimg});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

Also if you want to define multiple css value you can add them in {}:

$(document).ready(function(){
	var backgroundimg = $('.video_selection').attr('srcpost');
	$('.video_selection').css({'background-image': backgroundimg, 'height': '500px'});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")'>
  <p>Napoleon Dynamite</p>
</div>

Upvotes: 1

Krishnadas PC
Krishnadas PC

Reputation: 6529

$(function(){
	var backgroundimg = $('.video_selection').attr('srcpost');
	$( '.video_selection' ).css('background-image', backgroundimg);
})	
.video_selection {
  width: 500px;
  height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg")'>
  <p>Napoleon Dynamite</p>
</div>

Upvotes: 1

Related Questions