CSS : 모든 종횡비의 배경 이미지 스트레치?

http://www.squarespace.com 및 스플래시 페이지 배경 이미지를 참조하십시오. 창의 크기가 이미지에 맞게 조정 된 종횡비와 상관없이 타일링되지 않습니다. 이미지 크기가 커야 만하지만 이미지 크기는 6 메가 픽셀이고 광산 타일은 크기가 크고 파일 크기가 축소되어 iPhone을 복제 할 때 타일링됩니다.CSS : 모든 종횡비의 배경 이미지 스트레치?

스플래시 이미지에 사용하는 CSS 배경 설정 CSS는 squarespace.com입니까?

내 현재 설정에 관계없이 종횡비의 폭과 높이 모두에 맞는 배경 화상을 신장 할 background-size: cover 사용

position:absolute; 
top:0; 
right:0; 
bottom:0; 
left:0; 
background-position:center center; 
background-size:100% auto; 
background-image:url(../images/zzz.jpg);

출처

2014-06-16 oceanic815

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size는 당신이 찾고있는 "표지"입니까? http://jsfiddle.net/95SQ2/ – Huangism

절대적으로 감사합니다. 그것은 훌륭합니다. 당신이 내 질문에 답하면 나는 그것을 최선의 대답으로 투표 할 것입니다. – oceanic815

괜찮습니다. 이미 정확한 해결책을 제시 한 답변이 있습니다. – Huangism

출처

2014-06-16 20:18:16 TheHacksaw

변경

background-image: url('../images/zzz.jpg'); 
position: absolute; 
width: 100%; 
height: 100%; 
left: 0%; 
top: 0%;

아래 그리고 당신의 페이지 콘텐츠를 스크롤이있는 경우로 설정, 다음도 다음과 같습니다.

background-attachment: fixed; 
background-size: 100% 100%; 
background-repeat: no-repeat;

그래도 배경 이미지가 늘어날 가능성이 있습니다. 당신이 http://www.squarespace.com에서와 같이 화면 해상도에 따라 다른 크기의 이미지를 선택하려면 자바 스크립트를 사용하지 않도록하십시오.

출처

2014-06-16 20:33:10 nmnandakishore

CSS : 모든 종횡비의 배경 이미지 스트레치?

답변

관련 문제