[CSS] 이미지를 배경으로 지정하여 화면에 맞게 변경 > 기술자료

• 목록

스마트폰 모바일 홈페이지 작업하면서 필요해서 찾아 정리합니다.

모바일 또는 반응형 홈페이지에서는 배경으로 지정할때
브라우저의 크기가 변화에 따라서 배경 이미지를 처리하는 것이 쉽지 않습니다.

아래와 같이 하면 쉽게 지정된 이미지를 브라우저 크기에 맞게 변경(리사이징)됩니다.

<style>
.bg_contain {
    height: 0;
    padding-top: 47.2%; 
    /* 이미지높이px ÷ 이미지넓이px ×100 = 472px ÷ 1000px×100 = 47.2% */
    background: url(img/topimg_mobile.png) no-repeat center;
    background-size: contain;
}
</style>

<div class="bg_contain"></div>


참고자료
https://nanati.me/responsive-image/
http://rwdb.kr/ratio_calc/