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

본문 바로가기
사이트 내 전체검색

기술자료

HTML [CSS] 이미지를 배경으로 지정하여 화면에 맞게 변경

페이지 정보

댓글 0건 조회 164회 작성일 2018-10-14 01:19 ~ 2018-10-14 02:09

본문

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

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

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

<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/
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,290건 1 페이지
기술자료 목록
번호 제목
공지 일반   16486  2001-08-31 11:52 ~ 2017-12-05 16:33  
2289 Linux   10  2018-11-13 00:15 ~ 2018-11-13 00:38  
2288 그누보드   57  2018-11-09 06:32 ~ 2018-11-12 05:09  
2287 그누보드   74  2018-11-01 18:50 ~ 2018-11-01 19:01  
2286 영카트   70  2018-10-31 05:44 ~ 2018-10-31 05:47  
2285 그누보드   68  2018-10-30 15:47  
2284 그누보드   112  2018-10-22 09:58  
열람중 HTML   165  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   186  2018-10-04 23:04  
2281 MySQL   198  2018-10-03 02:29  
2280 MySQL   250  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   243  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   255  2018-09-27 23:56  
2277 그누보드   222  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   274  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   235  2018-09-21 19:28  
2274 그누보드   270  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   379  2018-09-14 05:59  
2272 전자결제   263  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   267  2018-09-12 14:17 ~ 2018-09-13 14:38  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
2,078
어제
3,025
최대
3,174
전체
4,383,452

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.