고정 너비 중앙, 동적 왼쪽 및 오른쪽 배경 이미지 열

Question

나는 내가 시도하고있는 일을 좀 할 수있는 방법을 찾았지만이 일을하는 데 가장 좋고 선호되는 방법이 무엇인지 잘 모르겠습니다. . 기본적으로 1000px 고정 너비 #main div, 왼쪽 및 오른쪽면 해상도가 충분히 큰 경우 더 많은 너비를 채울 수있는 두 개의 별도 이미지를 갖고 싶어하지만 이미지가 계산되지 않으면 문서 너비쪽으로 희망은 그 말이 맞습니다. 어떤 제안?

Answer 1

배경 이미지 (예 : bg.jpg)를 1400 픽셀 너비로 만들 수 있습니다. 왼쪽과 오른쪽 이미지를이 bg.jpg에 놓으십시오.

왼쪽 이미지가 왼쪽으로 가장 많이 이동하면 오른쪽 이미지가 bg.jpg의 오른쪽으로 이동합니다. 결국에는 하나의 이미지, 즉 bg.jpg 만 갖게됩니다.

기본 래퍼가 가운데 맞춤이면 CSS를 본문에 추가 할 수 있으므로 배경 이미지도 가운데 맞춤으로 사용할 수 있습니다. 그러나 주 래퍼는 왼쪽 오른쪽 이미지를 덮지 않을 것입니다.

body{ 
background-image: url("bg.jpg") center 0 no-repeat; 
} 

Answer 2

두 개의 옆면 이미지의 너비가 각각 200px라고 가정하면 뷰포트가 1400px보다 넓은 경우에만 표시하려고합니다.

CSS 미디어 쿼리를 사용하여이를 수행 할 수 있습니다. 오래된 브라우저 (IE7은, 8) 미디어 쿼리를 이해하지 않기 때문에 측면 이미지가 그 브라우저에서 표시되지 않을 것이라는 점을 염두에

.side-img { 
    display: none; 
} 

@media screen and (min-width: 1400px) { 
    .side-img { 
     display: block; 
    } 
} 

곰.

그 다음은 자바 스크립트 기반 솔루션을 선호 할 수있는 문제,이 jQuery를 함수의 라인을 따라 뭔가의 경우 : 당신이 배경 이미지로 두 이미지를 설정하지 않는 이유는

$(window).bind('resize',function(e){ 
    calcWidth(); // Called whenever window is resized. 
}); 

function calcWidth(){  
    var sideImgs = $('.side-img'); 
    var winW = $(window).width(); 
    if (winW > 1400){ 
     sideImgs.css('display', 'block'); 
    } else { 
     sideImgs.css('display', 'none'); 
    } 
} 

calcWidth();​ // Run this on page load. 

Answer 3

: (매우 간단)

background-image: url("background_one.png"), url("background_two.png"); 
background-position: left top, right top; 
background-repeat: no-repeat;