전체 HTML 요소를 덮도록 배경 이미지를 늘리려면 어떻게 처리합니까?

전체 HTML 요소를 덮도록 배경 이미지를 늘리려면 어떻게 처리합니까?

---

전체 너비와 높이를 늘리기 위해 HTML 요소 (body, div 등)의 배경 이미지를 얻으려고합니다.

운이별로 없습니다. 가능하거나 배경 이미지를 다른 방식으로해야합니까?

내 현재 CSS는 다음과 가변적입니다.

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

미리 감사드립니다.

편집 : Gabriel의 제안에서 CSS를 유지하는 데 열중하지 않는 대신 페이지의 레이아웃을 변경합니다. 하지만 그것이 최선의 대답 인 것 같아요 그렇게 표시하고 있습니다.

---

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

---

background-size속성 사용 : http://www.w3.org/TR/css3-background/#the-background-size

---

요컨대 시도 할 수 있습니다 ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

내가 CSS와 JS를 거의 사용하지 않는 곳 ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

그리고 그것은 나를 위해 잘 작동합니다.

---

배경 이미지를 늘릴 수 있는지 확실하지 않습니다. 모든 브라우저에서 가능하지 않은 위치에있는 수없는 경우 Z- 다른 색인을 낮게 설정하고 대상을 절대로 설정하여 확장 된 img 태그를 사용하여 콘텐츠가 그 위에 표시 할 수 있습니다.

당신이 무엇을 알려주세요.

편집 : 내가 제안한 것은 기본적으로 가브리엘의 링크에있는 것입니다. 그래서 그것을 시도하십시오 :)

---

@PhiLho 답변을 확장 광고 다음을 사용하여 매우 큰 이미지 (또는 모든 크기 이미지)를 페이지 중앙에 배치 할 수 있습니다.

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

또는 이미지의 배경과 일치하는 배경색의 작은 이미지를 사용할 수 있습니다 (단색 인 경우). 이는 귀하의 목적에 맞거나 맞지 않을 수 있습니다.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

---

화면 크기를 조정하는 동안 배경 이미지를 늘려야하고 이전 브라우저 버전과의 필요하지 않은 경우 다음 작업을 수행합니다.

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

---

큰 가로 이미지가있는 경우이 예제는 세로 모드에서 배경 크기를 조정하여 맨 위에 표시되고 맨 아래에는 공백으로 둡니다.

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

---

요청 된 효과를 얻기 위해 주로 사용하는 다음 코드 :

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

---

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

---

순수한 CSS에서는 할 수 없습니다. 다른 모든 구성 요소 뒤에 전체 페이지를 덮는 이미지를 갖는 것이 아마도 최선의 방법 일 것입니다 (위에 제공된 솔루션처럼 보임). 어쨌든 끔찍하게 보일 가능성이 있습니다. 나는 대부분의 화면 해상도를 커버 할 수있을만큼 큰 이미지 (예 : 1600x1200, 그 이상은 부족함)를 시도하거나 페이지 너비를 제한하거나 타일 이미지를 사용하려고합니다.

참고 URL : https://stackoverflow.com/questions/235855/how-do-i-stretch-a-background-image-to-cover-the-entire-html-element