매우 이상한 행동은

Question

나는 최근에이 주제에 background-size 속성 덕분에 대해 알게

Set size on background image with CSS?

당신이 추측 수 있듯이, 나는 배경 이미지가 전체 화면을 차지하기 위해 노력하고 더 이상/전혀 없습니다. 여기

https://jsfiddle.net/1x7ytdaa/

다음

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')"; 
document.body.style.backgroundSize = "contain"; 

이 contain 속성이 가장 큰 크기의 이미지는 그 폭과 높이가 모두 콘텐츠 영역의 내부에 들어가 수

스케일을 무엇을 내 바이올린입니다

이미지의 크기가 중요하지 않아야합니다. 크기가 작 으면 화면의 전체 크기로 조정해야합니다. 크기가 클 경우 크기를 줄여야합니다.

바이올린에서는 이미지가 가로로 5 번, 세로로 5 1/2 회 반복되는 것을 볼 수 있습니다.

나는 100% 100%을 시도하고 폭이 전체 화면으로 뻗어 있지만, 그것은 여전히 ​​같은 이미지를 내가이 동작을 설명 할 수 없다 수직

5 1/2 시간을 보여줍니다. 누구든지 아이디어가 있습니까?

Answer 1

두 가지 :

• 폭과 몸

의 높이 당신이 an edited fiddle에서와 수 있듯이을 배경 - 반복, 문제는 background-repeat의 기본값은입니다. 210. 따라서 이미지가 늘어나 기보다는 반복됩니다. 하지만 body와 HTML 요소의 너비는 100 %로 정의되어야하므로 모든 것을 해결하지는 못합니다. 당신은 화면 전체를 커버하려면

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

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')"; 
document.body.style.backgroundSize = "contain"; 
document.body.style.backgroundRepeat = "no-repeat"; 

대신 포함의 cover를 사용합니다. Cover는 요소가 완전히 덮여 있는지 확인하는 반면, 포함하는 것은 단순히 배경 이미지가 최대로 포함되도록합니다 (공백을 유발할 수 있음).

Answer 2

이 도움이 될 수 있습니다 :

position: fixed; 
background-position: center; 
overflow-x: hidden; 
width: 100%; 
height: 100%; 
background: url(img/xxx.jpg); 
background-size: 100%; 
background-attachment: fixed; 
overflow-y: scroll;