background-position

I'm trying to animate a background-image, so that the image appears from right to left. I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following background: url(../img/zeppelin.png); background-repeat: no-repeat; background-position: right; but when the page is loaded, I want the background to be animated, so that it is positioned left. This should take a eg. 2 seconds and only should be done one time. (the image should be positioned left afterwards). I don't wanna use any mouse-events or pseudo-classes. Is

I've a sprite of 62 images of 91 * 91px, which makes the whole thing 91 * 5642 px. They're displayed in sort of a dynamic grid that grows and shrinks depending on user/pointer movement. Sometimes an element (std 91 * 91 px) zooms in to make it 120 * 120 px. Obviously I want the background to grow with so that the entire 91 * 91 px image is shown in the entire 120 * 120 element. Enter background-size: 100% auto to make the width always perfect. Problem now is that background-position expects its values to be updated as well! All 62 elements have inline style=background-position etc . I can't

I've got three background images, all of width 643px. I want them to be set out like so: top image (12px height) no-repeat middle image repeat-y bottom image (12px height) no repeat I can't seem to do it without getting them to overlap (which is a problem because the images are partially transparent), is something like this possible? background-image: url(top.png), url(bottom.png), url(middle.png); background-repeat: no-repeat, no-repeat, repeat-y; background-position: left 0 top -12px, left 0 bottom -12px, left 0 top 0; Your problem is that the repeat-y is going to fill the whole height, no

This is a very specific bug - however, I would love for someone to show me a workaround! The bug basically consists in IE10 failing to do CSS animation of background-position when these two conditions are met at the same time : Having multiple backgrounds Setting background-position in percent Here's a demo, compare Chrome with IE10: http://codepen.io/dalgard/pen/LiyIK You need to put a percentage sign after the zeros. It must be so: @keyframes move { 0% { background-position: 0%, 0%; } 100% { background-position: 0%, 100%; } } 来源： https://stackoverflow.com/questions/17053703/rare-ie10-bug-css

how can I animate the background-position property using jQuery's animate function without using a plugin? I tried switching back to 1.4.4 when backgroundPosition was supported, however it just seems to work on IE and not on FF or Chrome. I've tried looking at the step callback of the animate function, but I can't get nothing to work. I had this same problem. The plugin linked by Samich is the only way to hit both birds with one stone (animate in nearly all browsers with nothing but JQuery/Javascript). Here's an alternative, but it ideally uses a feature-detection script like Modernizr for

I pretty new to js and jquery so please bear with me. I'd like to change the background-position and add 1% on #div1 while clicking on #button1 and take -1% on #div1 while clicking on #button2 How could i achive this in jQuery? Alse, bonus question: These are going to get dynamically generated through php. Is it possible to use php in the js-script so the id's get correct? like this: $i = 1 while($i <= 5): $div[$i] = 'div'.$i; $leftbutton[$i] = 'leftbotton'.$i; $rightbotton[$i] = 'rightbotton'.$i; $i++; endwhile; Else i'll have to learn how to make loops in js as well ;) Edit: Follow up