CSS로 고정 배경 맞추기

Question

내가 시도한 것은 불가능하지 않기를 바랍니다.

먼저 설명해 드리겠습니다. 일부 상황 (미디어 쿼리 블록)에서 배경을 수정해야하는 반응 형 디자인이 있습니다. 문제의 디자인이 하나입니다 최대 높이 하나는 최소 폭에 대한 하나

http://think-open.at/fileadmin/templates/responsive/content.html

는 기본적으로 두 개의 미디어 쿼리가 있습니다. 뷰포트 높이가 충분하면 내용 영역에 스크롤 막대가 있으며 디자인 높이가 고정됩니다. 그러나 뷰포트의 크기가 미리 정의 된 높이를 표시 할만큼 크지 않은 경우 height-mediaquery는 스크롤 막대를 내부 div에서 제거하므로 스크롤 컨테이너 두 개 (body + div)가 없으며 내용 영역을 height : auto로 설정합니다.

뷰포트가 너무 좁지 만 완벽하게 작동하는 경우 반응 형 미디어 쿼리가 있습니다.

문제가 : 전체 페이지가 스크롤되는 모드 (830px 높이 이하)로 디자인을 전환하면 오른쪽 컨테이너의 이미지가 "고정"되어 뷰포트 밖으로 스크롤되지 않습니다. . 그런데 뷰포트에 관한 배경 이미지를 "고정 된"위치에 놓으면 콘테이너 div와 관련하여 배경을 배치 할 수 없다는 문제가 발생합니다. 나는 여기에 CSS 바이올린을 만든 : 당신이 폭을 변경하는 경우

http://dabblet.com/gist/ae5c3598e1465ce0c90e

이 문제를 확인할 수 있습니다. 이미지의 오른쪽 테두리를 녹색 상자의 오른쪽 테두리에 맞추고 싶습니다.

어떻게 든 가능합니까? 구식 브라우저가 감지되면 일반 구식 디자인을 사용하기 위해 CMS에 조건이 있기 때문에 calc()를 사용하는 데 아무런 문제가 없습니다.

Answer 1

지금 직접 해결했습니다. 게시 해 주셔서 죄송합니다.

트릭은 : 내 디자인이 중심이므로 calc (50 % + somepixelvalue)를 사용해보기 시작했습니다. 이것은 일을했다. 이제 이미지가 항상 녹색 영역의 오른쪽 테두리 라인입니다 http://dabblet.com/gist/5b63553f47a81f3bb701

:

은 내가 CSS 놀이터을 수정합니다. 스케일링 할 때 때로는 1 픽셀의 차이가 있지만 배경이 마스크 역할을하는 일부 컨테이너 요소에 배정되므로 중요하지 않습니다.