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

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

기술자료

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

페이지 정보

댓글 0건 조회 20회 작성일 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,284건 1 페이지
기술자료 목록
번호 제목
공지 일반   16359  2001-08-31 11:52 ~ 2017-12-05 16:33  
열람중 HTML   21  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   56  2018-10-04 23:04  
2281 MySQL   67  2018-10-03 02:29  
2280 MySQL   85  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   108  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   117  2018-09-27 23:56  
2277 그누보드   101  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   137  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   128  2018-09-21 19:28  
2274 그누보드   165  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   223  2018-09-14 05:59  
2272 전자결제   170  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   172  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   315  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   249  2018-08-30 15:47  
2268 그누보드   251  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   230  2018-08-29 03:21 ~ 2018-08-29 17:13  
2266 JavaScript   291  2018-08-28 18:49  
2265 HTML   284  2018-08-27 14:33  
게시물 검색

회원로그인

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

접속자집계

오늘
239
어제
2,925
최대
3,174
전체
4,316,478

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