쇼핑몰 상품진열 섹션별 전체배경 넣기 가운데정렬 with값 html css

요즘엔 쇼핑몰 레이아웃을 화면전체를 가득 메우는 전체배경 이미지를 넣는 추세다.

with값을 100%로 주어 모니터 전체에 꽉착게 이미지를 넣어 시원시원해 보이고

메인페이지 상품진열시 섹션별로 나누어 단조로움을 벗어나기에 좋다.

 

예) 컨텐츠에 width값을 설정해서 가운데 정렬했을때

전체 with:100%

contents { with:1200px; margin:0 auto;}

 

 

예) 메인페이지를 섹션별로 나누어 전체배경 넣는곳과 with값 설정되어 가운데 정렬 하는곳으로 나눔

css style

.contents { with:100%; margin:0 auto;}

.contents .section_1 { max-width:1200px; margin:0 auto; background-color:#f9f0eb;}

.contents .section_3 { max-width:1200px; margin:0 auto; background-color:#f1f1f1;}

 

html

<div class="contents">

    <div class="section_1"> 전체배경 </div>

    <div class="section_2"> 가운데 상품진열 </div>

    <div class="section_3"> 전체배경 </div>

</div