가운데 배경 이미지 및 배경색 추가 위에

Question

이 게시물 Stretch and scale a CSS image in the background - with CSS only을 사용하여 내 배경 이미지를 크기에 맞게 늘리는 방법을 알아 냈습니다. background-size : 표지를 사용하고 있습니다.

하지만 두려운 게, 내가 필요로하는 것이 조용하지 않습니다. 나는 그것을 수행하는 방법 (좋은 방법)을 알아낼 수 없습니다 : 나는 3840 개 픽셀 X가 1024px

요구 사항과 같은 정말 넓은 해상도의 이미지가 있다고 가정 : 이미지가 중앙에

2. 뷰포트의 폭 < 1280px : 1280px의 고정 폭, 수평 스크롤 뷰포트의 폭> = 1280px : 없음 수평 스크롤에 배경 이미지
3. 사이트의 콘텐츠를합니다 (가 1024px 이상) 정말 긴 경우 내가 원하는 더 보여 하늘색과 같이 이미지 위에 색상을 추가하십시오. 그는 이미지의 위쪽 부분이 하늘이므로 bg-color가 이미지의 일부인 것처럼 보입니다.

현재 구현 (이상) : 이미지가 3 개의 균등 한 조각으로 잘립니다. 중간 부분은 내용 섹션의 배경입니다. 화면의 폭이 넓어지면 중간 부분의 왼쪽과 오른쪽의 2 개 div가 표시되며 이미지의 왼쪽과 오른쪽 부분이 배경으로 표시됩니다. 이 사이드 div의 크기 (높이와 너비)는 창 크기가 조정될 때마다 js로 계산됩니다. 배경 이미지의 오프셋은 Chrome에서 작동하지만 Firefox에서는 왼쪽 div에 문제가 있습니다.

이에 대한 코드는 다음과 같습니다이 할 수있는 좋은 방법은

var PageWidth = 1280; 
var SideImageWidth = 1280; 
function calculateImageSet(){ 

    var bodyWidth = $('body').width(); 
    var fillerSize = Math.floor((bodyWidth - PageWidth)/2); 

    if(bodyWidth < PageWidth){ 
     $('#fillerLeft').hide(); 
     $('#fillerRight').hide(); 
    } 
    else{ 
     var imageOffset = SideImageWidth - fillerSize; 
     var mainHeight = $('#main').outerHeight(); 
     $('#fillerLeft').width(fillerSize).height(mainHeight).show(); 
     # Doesn't seem to work 
     if($.browser.mozilla){ 
      $('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px'); 
     } 
     $('#fillerRight').width(fillerSize).height(mainHeight).show(); 
    } 
} 

있습니까? js없이?

요구 사항을 이해하지 못한 경우 요청하십시오.

감사합니다

편집 : 은 내가 (거의 작업) 방법이있어 : 콘텐츠가이 좋은 높지가 1024px보다이지만, 경우

#main{ 
    background-color: #d4eaff; 
    background-image: url('forest-wide.jpg'); 
    background-repeat: no-repeat; 
    background-size: auto 1280px; 
    background-position: center top; 
    min-width: 1280px; 
} 

을이가 1024px 이상 때 파란색을 하단에 추가하므로이 시점에서 배경 위치를 중앙 아래쪽으로 변경해야합니다.

Answer 1

당신이 시도하고있는 것이 완벽하게 펼쳐진 배경 이미지를 얻는 것이라면이 사이트가 도움이 될 것입니다. 순수하게 사파리 3+, 크롬 무엇이든 +, IE 9+, Opera 10+, Firefox 3.6 이상

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