I am using jquery slider and I want to move my image according to how slider moves but for some reason its not working for me here is the code
.main{
background: transparent url(/img/ads/bootsImg.jpg) no-repeat 20px 30px;;
width: 300px;
background-size: 322px;
font-family: 'Futura-Book';
}
<div id="background-image-horizontal"></div>
//slider
$('#background-image-horizontal').slider({
max: 50,
min: 10,
value: 14,
slide: function(e,ui) {
console.log("transparent url(/img/ads/bootsImg.jpg) no-repeat "+ui.value+"px 1px");
$('.main').css("background","transparent url(/img/ads/bootsImg.jpg) no-repeat "+ui.value+"px 1px");
}
});
In my console I see this changing when I move slider but on my screen the image doesnt move
transparent url(/img/ads/bootsImg.jpg) no-repeat 28px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 29px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 30px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 31px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 32px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 33px 1px ?img=bootsImg.jpg&w=300&h=300:330
One reason could be that you have no height mentioned for your .main
and i believe it is a div
, so it takes 0 height. try set some height
.
.main{
background: transparent url(/img/ads/bootsImg.jpg) no-repeat 20px 30px;;
width: 300px;
height:200px; /*Set some height*/
background-size: 322px;
font-family: 'Futura-Book';
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments