CSS 배경 반복

Question

반복보다는 배경 이미지를 스트레칭하는 방법이 있습니까?

Answer 1

어떤 종류의 크로스 브라우저 호환 CSS를 사용하지 않습니다 ( background-size 그러나 재산.)

이것이 특히 브라우저에 표시되면 가능할 수 있습니다. 그렇지 않으면 An을 사용해야합니다 <img> 그리고 그것을 스트레칭합니다.

최근 브라우저에서 수행하는 방법은 다음과 같습니다.

body {
    background-image: url(bg.jpg);
    -moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;       /* Opera 9.5 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0 */
    -khtml-background-size: 100% 100%;   /* Konqueror 3.5.4 */
}

그렇지 않으면, 사용 <img>:

img#background {
    /* height: 100%; Note: to keep ratio, don't use height */
    left: 0;
    position: fixed; /* or absolute, if you like */
    top: 0;
    z-index: -1;
    width: 100%;
}

Answer 2

CSS3에서만

이미지를 사용하여 너비와 높이를 100%, z -index로 -1 위치로 설정할 수 있습니다. 작동 할 수도 있습니다.

Answer 3

배경 크기는 CSS3이며 아직 지원되지 않았습니다. 이 기사를 볼 수 있습니다. 웹 페이지에서 배경 이미지를 어떻게 확장합니까?

도움이 되었기를 바랍니다.

Answer 4

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

http://www.w3schools.com/css/css_background.asp

이것은 당신의 이미지를 찌르지 않지만 이미지가 반복되지 않도록합니다.