Question

I’ve been researching this but can only see posts using .replace and other methods using a single image.

Not sure how to do this one but put together a fiddle to show what I’m working towards.

There are img’s in the slider that need to be removed and applied to their own parent divs as css backgrounds. As you can see slide1 and slide2 have different lorempixel url’s but the first url is applied to both slides.

This is the jQuery I’m using:

$(document).ready( function(){

  var src = $('.page').find('img').attr('src');

  $('.page img').each(function() {

      $(this).parent().css('backgroundImage','url('+src+')');
      $(this).remove();

  });    

});

Any guidance would be great

Cheers

Answer 1

Changed your jquery :

$(document).ready( function(){
  $('.page img').each(function() {
      $(this).parent().css('backgroundImage','url('+$(this).attr('src')+')');
      $(this).remove();
  });    

});

Problem was When you do src gives you array of image source files and you were not looping through the loop. properly.

updated jsfiddle – http://jsfiddle.net/cse2u/3/