웹 사이트에서 동적 배경 이미지를 만드는 방법은 무엇입니까?

Question

의존성을 사용해야하는지는 모르지만 레일즈에서 루비와 함께 Jquery를 사용합니다. 요점에, 나는 나의 배경을 위해 사용하고 싶은 3 개의 이미지가있다.

상단 이미지, 중간 이미지 및 하단 이미지. 상단 및 하단 이미지를 정적으로 유지하고 해당 페이지에있는 콘텐츠의 양에 따라 중간 이미지 타일을 유지하고 싶습니다. 누구나 어떻게 할 수 있을지 아는 사람이 있습니까? 나는 행운이없이 잠시 주변을 둘러 보았다.

.background-top { 
    background-image: image-url('background/background_top.png'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: top; 
} 
.background-mid { 
    background-image: image-url('background/background_mid.png'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: center; 
} 
.background-bot { 
    background-image: image-url('background/background_bot.png'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: bottom; 
} 

Answer 1

var body = document.body; 
html = document.documentElement; 
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 

사용이 코드는 페이지의 높이를 얻을 수 있습니다. 높이가 특정 크기보다 큰 경우 중간 이미지로드시 조건을 추가합니다.