상단에 유연한 배경 이미지로 바둑판 식으로 배열 된 배경 (오 - 및 그림자)

Question

배경 이미지와 질감을 사이트의 기능으로 사용하는 사이트 디자인이 있습니다. 여기

참조 배경 디자인 개념 : http://www.flickr.com/photos/54233587@N03/6145240784/in/photostream

배경은 다음과 같이 작동하기위한 것입니다 :

페이지의 배경 (또는 일부 페이지에 단색 배경 색상이있을 것이다) 바둑판있다.

배경의 상단 부분은 배경 이미지로 덮어 씌여 있습니다. 배경 이미지는 넓은 이미지 (2000 픽셀 넓이)이며 창 중앙에 배치해야합니다. 페이지에 따라 이미지 높이가 아래쪽에서 자릅니다 (즉 한 페이지에서 이미지는 400px가되어야하지만 다른 페이지에서는 450px가되어야 할 수도 있음). 이 배경 이미지에는 CSS3 상자 그림자가 적용되어 있으므로 이미지 하단에 약간의 그림자가 생깁니다. 이 배경 이미지는 고정 된 위치를 사용할 수 없습니다. 즉, 스크롤하면 페이지와 함께 이동해야합니다.

다른 모든 페이지 콘텐츠는 스크린 샷의 검은 색 상자로 표시된 가운데 div에서 배경 위에 위치합니다.

타일 된 배경에 대해 HTML5 html 노드를 타겟팅하여이 작업을 시도했습니다.

html { 
    background: url(../img/pegboard.jpg) repeat center; 
} 

그런 다음 오버레이 배경 이미지의 경우 div 요소를 사용하여 이미지를 삽입했습니다.

<div id="bgimage"><img src="mybgimage.jpb"></div> 

는 그런 시도하고 센터, 고정되지 스크롤 할 때, 그리고 바닥에서 작물 이미지에 DIV의 크기를 조정 IMG 스타일링. 모두 성공하지 못했습니다.

감사합니다.

Answer 1

나는 이렇게 할 것입니다.

HTML :

<div id="bgimage"></div> 
<div id="content"> 
    Actual content goes here. 
</div> 

CSS : 제목의 마지막 부분에 대한

body { 
    background: url(../img/pegboard.jpg) repeat center; 
} 
#bgimage { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: url(../img/mybgimage.jpg) no-repeat center; 
    height: 400px; 
    box-shadow: 0 5px 5px -5px #000; 
} 
#content{ 
    margin: 0 auto; 
    width: 960px; 
    height: 1000px; 
    background: #000; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
}