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

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

기술자료

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

페이지 정보

댓글 0건 조회 194회 작성일 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,291건 1 페이지
기술자료 목록
번호 제목
공지 일반   16512  2001-08-31 11:52 ~ 2017-12-05 16:33  
2290 HTML   24  2018-11-16 12:11 ~ 2018-11-16 12:17  
2289 Linux   45  2018-11-13 00:15 ~ 2018-11-15 05:37  
2288 그누보드   93  2018-11-09 06:32 ~ 2018-11-17 13:46  
2287 그누보드   102  2018-11-01 18:50 ~ 2018-11-01 19:01  
2286 영카트   96  2018-10-31 05:44 ~ 2018-10-31 05:47  
2285 그누보드   93  2018-10-30 15:47  
2284 그누보드   141  2018-10-22 09:58  
열람중 HTML   195  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   216  2018-10-04 23:04  
2281 MySQL   229  2018-10-03 02:29  
2280 MySQL   295  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   269  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   274  2018-09-27 23:56  
2277 그누보드   238  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   299  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   257  2018-09-21 19:28  
2274 그누보드   295  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   416  2018-09-14 05:59  
2272 전자결제   295  2018-09-14 04:57 ~ 2018-09-14 04:58  
게시물 검색

회원로그인

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

접속자집계

오늘
562
어제
2,794
최대
3,174
전체
4,399,261

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