更改CSS中的背景位置不起作用

Question

I have an image with size of 5760x496px. This image is composed by three images of 1920x496px. Now i'm trying only to change the position with :hover and when i'll know how it works i'll change it in jQuery. The problem is that the result of my code is a white background so i think that something isn't working in it. This is my css:

.slider {   
    position:relative;
    height: 496px;
    border-bottom: 1px solid #ddd;
    background: url(../images/full_slider.jpg) no-repeat;
    background-position-x: 0px;
}

.slider:hover{
    background-position-x: 1920px;
}

In this case i expected to translate the background from the first slide to the second slide only but this isn't the result.

Answer 1

you can set the x property for background-position like this:

 background-position: x-px y-px; 

Ex: background-position: 40px 0;

see this works with your example: http://jsfiddle.net/hboq09p9/

code:

.slider {   
    position:relative;
    height: 496px;
    border-bottom: 1px solid #ddd;
    background: url('http://images.visitcanberra.com.au/images/canberra_hero_image.jpg') no-repeat;
    background-position: 0px 0px;
}

.slider:hover{
    background-position: 40px 0;
}

(I have just moved it 40px because my image is not 1920px wide)

Answer 2

Take a look at this - http://www.w3schools.com/cssref/pr_background-position.asp

background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;