본문 배경 위치는 페이지 요소에 상대적이어야합니다.

Question

본문 배경은 페이지 요소 (#container)와 관련이 있어야합니다. 페이지의 크기를 조정하면 (작은 너비) 컨테이너가 왼쪽으로 이동합니다 (가운데 맞춤이기 때문에). 배경도 같은 양의 왼쪽으로 움직여야합니다.

지금 나는 내 문제에 대해 작동하는 다음 코드를 가지고 : 그것은 잘 작동

/* 
* The background must be relative to the rest of the page elements. 
* The background position.left = 0px when the offset.left of the container = 362. 
* The new background position.left is based on the current position of the container. 
*/ 
var beginBackgroundPositionLeft = 362; 
function changeBackgroundPosition() { 
    var newLeft = jQuery("div.container").offset().left; 
    newLeft = (-1 * beginBackgroundPositionLeft + newLeft) + "px"; 
    jQuery("body").css("background-position", newLeft + " 0px"); 
} 

jQuery(window).resize(function(e){ 
    console.log(e); 
    // Change the position of the background 
    // when resizing the window. 
    changeBackgroundPosition(); 
}); 

jQuery(document).ready(function() { 

    // Change the position of the background on entering the page.. 
    // Is needed because we don't know the resolution of the user so it can't be done with css. 
    changeBackgroundPosition(); 
}); 

, 그러나 높이 브라우저의 크기를 조정하는 경우 또한 실행합니다. 브라우저의 가로 크기가 조정되었는지 확인하여 높이의 크기 조정을 무시할 수 있습니까?

물론 현재 창 너비를 저장하고 변경되었는지 확인할 수 있지만 더 좋은 방법을 찾고 있습니다. 아직 알지 못하는 것을 배울 수 있습니다.))! 당신이 볼 수 있듯이, 내가 크기 조정 기능의 'E'를 기록했지만, 그 안에 나에게 유용 아무것도 찾을 수 없습니다

..

희망 제안의 뭔가를 배울 수 있습니다. 감사!

Answer 1

이렇게하면 창 너비 만 변경된 경우 "어떻게 처리합니까"입니다. resize 이벤트 객체에는별로 좋지 않은 방식으로 감지 할 수 있습니다. 아마도 당신은 배경 위치의 CSS 속성의 비율 실험에서 뭔가를 찾을 수 있습니다 : 당신은 당신이 또한 CSS를 통해 중심 배경 - 이미지를 설정할 수 있다는 사실을 알고 희망

var $window = $(window), 
    w = $window.width(); 

$window.resize(function(e) { 
    if (w = $window.width() == w) { 
     return; 
    } 
    console.log('width changed'); 
}); 

Answer 2

합니다.

background-position: center top; /* first value is horizontal alignment second is vertical*/ 
background-position: center center; 
background-position: center bottom; 

또는 백분율로 배경 위치를 지정할 수도 있습니다.

이미 언급 한 것을 제외하고는 가로 크기 조정 만 처리 할 가능성이 전혀 없습니다 (현재 창 너비 저장 및 비교). 제안 된 솔루션에 문제가 표시되지 않습니다. 더 나은 방법이 있다면 누구든지 나를 바로 잡습니다.

Answer 3

잠깐, 그래서 body { background:#fff url(bg.jpg) no-repeat 50% 0; }는 자르지 않습니까?