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

Question 1

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

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

내 현재 CSS는 다음과 같습니다.

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

미리 감사드립니다.

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

Question 2

<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>

Question 3

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

Question 4

요컨대 이것을 시도 할 수 있습니다 ….

<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>

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

Question 5

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

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

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

Question 6

@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;
}

Question 7

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

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

Question 8

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

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;
    }
}