style{ background: url...}
<body>
<div id = 'content'>
BLABLABLABLABLBA
</div>
</body>
브라우저 배경을 자르면 자동으로 다시 조정됩니다 (CSS에서) 배경 이미지를 설정하는 방법을 알고 싶습니다. 콘텐츠는 수정해야합니다.background-image 확대, 잘라 내기 내용이 고정적입니다.
감사
style{ background: url...}
<body>
<div id = 'content'>
BLABLABLABLABLBA
</div>
</body>
브라우저 배경을 자르면 자동으로 다시 조정됩니다 (CSS에서) 배경 이미지를 설정하는 방법을 알고 싶습니다. 콘텐츠는 수정해야합니다.background-image 확대, 잘라 내기 내용이 고정적입니다.
감사
외부 div에 position:fixed
을 사용하는 고정 크기와 이미지를 보유하는 내부 div가 모두 background-size:contain
을 사용하는 고정 크기를 갖는 과정을 보여주는 여기에 jsFiddle이 있습니다.
편집 : 이제는 추가 테두리를 사용하여 경계 요구 사항도 포함 시켰습니다.
EDIT-2 : 비 추상적 인 이미지와 함께 :contain
이 아닌 jsFiddle이 :cover
으로 업데이트되었습니다. 같은 IE6-8 오래된 브라우저의
는 CSS3 스타일의 사용을 허용하는 선택할 수있는 플러그인이 있습니다. backgroundSize.js이라는이 jQuery 플러그인은 특별히 :cover
및 :contain
을 background-size
으로 사용하며 해당 옵션이 필요한 경우 SO 멤버 Louis-Rémi에 의해 제공됩니다.
는 perfect-full-page-background-image라는 http://css-tricks.com/에 대한 기사가 문제를 파악하는 데 도움이 될 것입니다. 그는 당신에게 모든 다른 방법을 제공합니다.
그런데 #content 너비를 고정 폭으로 유지하면됩니다.
최신 브라우저에서는 background-size를 사용할 수 있습니다. 구형 브라우저의 경우 태그를 사용할 수 밖에 없습니다. – Thomas