CSS - 너무 넓은 배경

Question

내 CSS 웹 사이트에 약간의 문제가 있습니다. 내 PS 디자인을 html5 및 css3 사이트로 변환하는 중이며 페이지 위쪽과 아래쪽의 배경 이미지가 너무 큽니다 (1600 픽셀). 전체 사이트의 모양과 느낌을 유지하려면 어떻게해야합니까?

Answer 1

그것은 여기에 질문이 좀 명확 있다면 좋을 것이나, 간다 :

웹 사이트가 크게 볼 방문자가 사용하고있는 화면의 해상도에 따라 결정되는 방법

. 예를 들어 사용자 A의 해상도는 1920 x 1080 일 수 있습니다. 즉, 사용자 A는 모든 웹 사이트를 쉽게 볼 수 있습니다. 다른 사용자는 1024 x 768 밖에 가질 수 없지만, 분명히 1600 픽셀을 모두 볼 수있을 정도로 크지는 않습니다!

이 문제를 해결하려면 사이트의 디자인에 따라 크게 달라 지거나 반복 할 수있는 배경 (예 : 그라디언트) 또는 스카이 라인과 같이 약간 까다로운 것이 있습니까?

간단하면 CSS를 사용하여 배경을 가로, 세로 또는 둘 다 반복 할 수 있습니다.

중간 부분을 보면서 화면 측면을 가로 지르는 가장자리를 자르고 배경을 중앙에 배치하는 CSS (예 : 가운데 가운데)를 사용하여 배경을 배치 할 수도 있습니다.

CSS3에서는 "background-size"속성을 사용하여 배경이 반응하는 방식을 정의 할 수 있습니다. 이 가질 수있는 몇 가지 값은 다음이있다 :

• 커버 -이 (전체 이미지가 보이도록)는 용기의 내 전체 이미지가 맞는 확인합니다.
• 에이 포함되어있어 이미지가 전체 컨테이너에 맞춰지기 때문에 이미지의 일부가 보이지 않을 수 있습니다.
• dimensionx dimensiony - 값/백분율을 지정하면 첫 번째 값/백분율은 너비이고 두 번째 값은 너비입니다. 하나만 제공되면 너비에 사용되며 높이는 auto로 설정됩니다.

모든 브라우저에서 배경 크기가 지원되지는 않습니다.

배경 크기의 데모

는 : http://davidwalsh.name/demo/background-size.html

Answer 2

당신은 할 사용자, 페이지 또는 화면에 맞게됩니다 div 이하 용기의 화면 해상도는 어떤

body, elementID, elementClass{ 
    margin: 0px; 
    width: 100%; 
} 

아래처럼 CSS.