CSS를 움직이는 배경 이미지

Question

격자 모양의 바둑판 식 배경 이미지가 있습니다.

질문 :

는이를 통해 패닝되고있는 효과를 제공하기 위해 CSS를 사용하여 타일 이미지를 이동할 수 있다면 난 그냥 궁금 해서요. 그러나 이미지는 여전히 화면의 전체 너비와 높이에 걸쳐 있어야합니다.

타일 이미지 :

현재 CSS : 당신이 위/아래 화살표를 누르거나 팬을 사용할 때 나는 CSS 기울기 값을 조정

#background 
{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: #7abcff; /* Old browsers */ 
    background-image: url('../images/background.jpg'); 
} 

오른쪽 상단 모서리에있는 도구.

솔루션 : jQuery를하고 CSS 배경 위치를 사용하여이 :

$('#background').attr("style", "background-position: " + this._bgL + 'px ' + this._bgT + 'px'); 

Answer 1

당신은 배경 이미지를 이동 background-position: <offset-x> <offset-y>^[docs]를 사용할 수 있습니다.

여기를보십시오

: http://jsfiddle.net/4Cwj5/

Answer 2

일부 시차 효과 자습서를 살펴 보자 ("실행"을 background-position 속성을 변경하려고 클릭). 그들은 당신이 궁극적으로 목표로하는 것처럼 보이는 것을 설정합니다. 당신이 움직이는 배경을 원하는 경우 자바 스크립트와 함께

Awesome CSS Effect