2012-05-13 3 views
0

jQuery 모바일 툴킷을 사용하여 모바일 버전의 웹 사이트를 구축하고 있습니다.CSS 모바일 웹 사이트 배경 이미지

페이지는 세로 레이아웃 (세로 스크롤 만 가능)을 갖습니다.

사용자가 맨 아래로 스크롤 할 때도 기본 페이지에 배경 이미지를 표시하려고합니다.

이미지가 큰 이미지이므로 반복하지 않음 모드로 표시됩니다. 이미지는 페이지의 왼쪽 상단 모서리에 이미지가 표시되어야하며 이미지의 너비와 높이가 가능한 한 많이 표시되어야합니다 (이미지의 크기를 조정하지 않아야하며, 그렇지 않으면 자르지 않아야 함).

모든 (또는 모든) 서로 다른 화면 크기 및 화면에 대해 이미지를 전달할 수 있습니까?

답변

1

widthheight CSS 미디어 쿼리를 사용하여 사용자의 뷰포트 너비와 높이를 기반으로 다른 배경 이미지를 제공 할 수 있습니다.

그리고 당신이 <body> 요소에 배경 이미지를 설정하고 fixed에 그 background-attachment 속성을 설정하면 다음 배경 이미지가 뷰포트에 대해 동일한 위치에 남아있을 것입니다 경우에도 사용자가 페이지를 스크롤.

0

아래의 미디어 쿼리 내에서 필요로하는 CSS 변경합니다 :

@media screen and (max-width: 480px) { 
}