전체 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, 그 이상은 희소 함)를 시도하거나 페이지 너비를 제한하거나 타일 이미지를 사용하려고합니다.

영상{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

div를 body의 직계 자식 (예 : 클래스 이름 bg 사용)으로 만들고 본문의 다른 모든 요소를 ​​포함하고 CSS 파일에 추가하면됩니다.

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

다음 링크를 참조하십시오 : https://www.w3schools.com/css/css_rwd_images.asp 다음과 같은 부분으로 스크롤합니다.

2. background-size 속성이 "100 % 100 %"로 설정되면 배경 이미지가 전체 콘텐츠 영역을 덮도록 늘어납니다.

여기에는 크기를 조정하는 방법에 관계없이 화면이나 브라우저의 크기로 늘어나는 'img_flowers.jpg'가 표시됩니다.

그것은 나를 위해 작동합니다

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}