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

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

기술자료

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


페이지 정보

댓글 0건 조회 475회 작성일 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,323건 1 페이지

기술자료 목록
번호 제목
공지 일반   16899  2001-08-31 11:52 ~ 2017-12-05 16:33  
2322 그누보드   3  2019-02-16 01:51  
2321 PHP   17  2019-02-13 21:01  
2320 JavaScript   101  2019-02-08 18:37 ~ 2019-02-08 19:32  
2319 그누보드   117  2019-02-08 16:47 ~ 2019-02-08 16:54  
2318 그누보드   160  2019-01-31 18:45 ~ 2019-01-31 18:52  
2317 PHP   148  2019-01-31 18:26 ~ 2019-01-31 18:38  
2316 PHP   207  2019-01-23 17:50  
2315 PHP   196  2019-01-23 15:38  
2314 etc보드   205  2019-01-22 23:32  
2313 MySQL   216  2019-01-22 00:43  
2312 Linux   195  2019-01-21 15:38  
2311 Linux   217  2019-01-21 07:18  
2310 그누보드   178  2019-01-16 18:41 ~ 2019-01-17 19:01  
2309 etc쇼핑몰   174  2019-01-15 04:30 ~ 2019-01-28 00:30  
2308 etc보드   156  2019-01-15 04:26 ~ 2019-01-15 05:04  
2307 HTML   224  2019-01-11 23:20 ~ 2019-01-11 23:24  
2306 그누보드   181  2019-01-11 01:42 ~ 2019-01-11 01:43  
2305 호스팅   284  2019-01-09 08:50  
2304 그누보드   356  2019-01-01 23:07  

게시물 검색

회원로그인

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

접속자집계

오늘
441
어제
2,629
최대
3,306
전체
4,600,016

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