2013-04-21 3 views
2

배경 이미지가 있고 내 사이트의 전체 배경을 채우기를 원합니다. 나는 다음을 사용한다 :창을 채우는 배경 이미지?

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

이미지는 2000px x 2000px이다. 문제는 브라우저 창이 2000px보다 클 때 흰색 배경을 볼 수 있다는 것입니다. 브라우저 창이 이미지보다 클 경우 이미지를 스트릿에 가져 오는 방법이 있습니까?

+0

가능한 중복 : http://stackoverflow.com/questions/1150163/stretch-and-scale 여기에 스트레칭 작은 이미지의 예는 더 큰 사업부를 채우기 위해입니다 -a-css-image-in-the-css-only? rq = 1 – levelnis

+0

CSS를 사용하고있는 요소는 무엇입니까? –

답변

1

먼저 배경으로 사용하는 큰 이미지는 배경으로 사용하지 마십시오. 당신은 이것을 커버 할 수있는 모든 것을 넣지 않는 것처럼 할 수 있습니다. 스타일 태그에이 두 가지를 넣어 주면됩니다.

background-image:url('your image'); 
background-size: cover; 

이미지가 너무 많이 확대되지만 작동하면 이미지의 품질이 떨어질 수 있습니다.

+0

이것은 작동하지 않습니다. 내 이미지를 작게 만들었지 만 지금은 화면을 채우지 못합니다. – panthro

0

이 시도 :

background-size: 100% auto; 
0

background-size: cover; 나를 위해 두 가지 방법을 작동하는 것 같다 - 모두가이 요소, 또는 작은 있다면 채우기 위해 이미지를 스트레칭보다 큰 있는지 채우기 위해 이미지를 축소. http://jsfiddle.net/MRSallee/Q7STG/

0

내가 이것을 사용하여 선호 :

background: url(../img/url.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover;