메뉴 건너뛰기

프로그램언어

2016.12.23 09:27

background-size 속성

조회 수 2037 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
background-size: auto;
 
원래 이미지 사이즈대로 사용됨.
박스에 크기를 주더라도 원래 이미지 사이즈대로 나타남.
 
background-size: 500px;
 
값이 하나만 있을경우 width 값으로 인식됨. height는 비율에 맞추어 auto로 나타남.
 
background-size: 500px 300px;
 
지정한 값대로 width는 500픽셀, height는 300픽셀로 나타남.
 
background-size: 50% auto;
 
박스값의 50%의 너비로 지정됨. 높이는 auto로 나타남.
 
background-size: 100%;
 
이미지의 너비와 높이비율을 박스 크기에 따라 100%로 맞춰줌
 
background-size: contain;
 
이미지의 너비와 높이 비율은 유지됨.
요소의 너비나 높이 중에 작은값에 이미지를 맞춤.
(이미지는 잘려보이지 않지만  공백이 보일수 있음)
 
background-size: cover;
 
이미지의 너비와 높이 비율은 유지됨.
요소의 너비나 높이 중에 큰값에 배경을 맞춤.
(화면을 꽉 채우고 싶을때 사용 / 이미지의 일부는 잘려서 안보일수 있음)

List of Articles
번호 제목 날짜 조회 수
25 CSS : 반응형 웹(Responsive Web) file 2017.04.14 1660
» background-size 속성 2016.12.23 2037
23 input box 테두리 없애기 2016.12.23 1727
22 기본적으로 보이는 스크롤바를 없애기 2016.12.23 1707
21 하이퍼링크 & 링크이미지에 점선을 죽임 2016.12.23 2042
20 링크 오버속성+버튼 디자인 2016.12.23 1513
19 텍스트 ime모드 속성 2016.12.23 1794
18 폼을 투명하게 2016.12.23 1698
17 인쇄할때 페이지 나누는 br 태그 2016.12.23 1590
16 웹 브라우저에 [가로 스크롤 안생기게 하기] 2016.12.23 1509
15 중급 사용자를 위한 CSS 선택자에 관한 지식 / CSS에서 마우스 동작을 감지하는 방법 2016.12.22 1733
14 CSS3를 이용하여 둥근모서리 박스 만들기 2016.12.22 1565
13 HTML 목록 태그와 CSS를 활용하여 깔끔한 목록 스타일을 만드는 방법 / CSS list-style file 2016.12.22 1842
12 말줄임 2016.12.22 1527
11 css를 이용한 테이블 가운데 정렬 2016.12.22 1613
10 light박스 css로 흉내내기 2016.12.22 1556
9 CSS background-repeat 이해하기 2016.12.22 1583
8 모바일 체크박스 변경 마크업 2015.02.03 1579
7 모바일 실제 해상도와 device-width 2015.02.03 1565
6 IIS7 에서 woff MIME 등록하기. 2015.02.03 1599
Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved