배경 이미지 위치가 부모 요소로 고정

div가 페이지의 어딘가에 있습니다. 브라우저 창을 스크롤 할 때 배경 이미지가 이동해야합니다. 이것은 지금까지 내 코드입니다 :배경 이미지 위치가 부모 요소로 고정

#mydiv { 
    float:left; 
    width:540px; 
    margin:40px 0px 0px 20px; 
    background:url(/images/myimage.jpg) no-repeat fixed 0px 0px transparent; 
}

문제는 내 배경 이미지가 캔버스에 상대적으로 위치하도록하고 나는 그것이 #mydiv에 상대적으로 위치 여전히 스크롤 할 필요가있다.

는 문제가 예를 #div1 잘 보이지만 전혀 대신 #div2의 캔버스에 상대적으로 위치로 배경을 #div2 표시되지 않습니다 여기에 http://jsfiddle.net/QPrUz/1/
참조하십시오 설명합니다.

모든 의견을 환영합니다.

P.
iframe을 사용할 수 없습니다.

출처

2011-06-12 6bytes

에 배경 이미지가 고정 된 배경-부착 값을 이용하여 배치 된 경우, 배경 - position은 요소의 패딩 상자가 아니라 뷰포트를 나타냅니다. - http://reference.sitepoint.com/css/background-position – Jawad

Jawad의 의견에 따르면 CSS를 사용할 수 없습니다. 나는 배경을 반복 가능한 것으로 바 꾸었습니다. fixed에 대한

출처

2011-07-28 10:29:25 6bytes

-1

당신은 이것을 달성하기 위해 일부 자바 스크립트를 사용해야합니다.

출처

2011-06-12 18:30:54 6nagi9

MDN는 말한다 :

이 키워드는 배경이 뷰포트에 대해서 고정되어 있다는 것을 의미한다.

대신 사용 fixed의 scroll는 :

이 키워드는 배경이 요소 자체에 대해서 고정되고 그 내용으로 스크롤되지 않는 것을 의미한다. (그것은 효과적으로 요소의 경계에 부착되어 있습니다.)

그래서, 끈적 배경에 대한 전체 코드는 요소 자체에 상대적으로 고정 : 제가 질문을 이해하면, 당신은 단지 위치로

.sticky-background { 
    background: url(...) no-repeat scroll; 
}

출처

2015-08-10 08:05:34 ilyaigpetrov

이 div2가 div1처럼 보이도록 배경 이미지의 위쪽/왼쪽. 여기

그것이 : http://jsfiddle.net/7kku4v1t/

I에만 변경됨

background:url(http://i35.tinypic.com/4tlkci.jpg) fixed no-repeat;

background:url(http://i35.tinypic.com/4tlkci.jpg) 210px 0 fixed no-repeat; 
                ^^^^^^^ 
                X  Y

출처

2017-08-29 20:53:01 gcb

배경 이미지 위치가 부모 요소로 고정

답변

관련 문제