메뉴 건너뛰기

프로그램언어

2016.12.23 18:27

background-size 속성

조회 수 5924 추천 수 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
번호 제목 날짜 조회 수
32 CSS / 링크 상태 속성 / <a>태그 CSS / 밑줄 없애기,변경하기 2023.01.27 129
31 CSS/기호/공백/띄어쓰기/<> 2023.01.27 120
30 CSS/table/border-collapse/테이블 선 속성 file 2023.01.27 101
29 CSS 미적용, 다르게 적용 2021.03.26 244
28 CSS - display : flex를 통한 수직, 수평 정렬하기 file 2021.03.09 466
27 CSS - position:absolute 가운데, 중앙 정렬하기 file 2021.03.09 418
26 파비콘 없어서 계속 서버에 로그 쌓이는 경우 2019.04.29 872
25 CSS : 반응형 웹(Responsive Web) file 2017.04.14 5976
» background-size 속성 2016.12.23 5924
23 input box 테두리 없애기 2016.12.23 9719
22 기본적으로 보이는 스크롤바를 없애기 2016.12.23 5165
21 하이퍼링크 & 링크이미지에 점선을 죽임 2016.12.23 5807
20 링크 오버속성+버튼 디자인 2016.12.23 4709
19 텍스트 ime모드 속성 2016.12.23 5002
18 폼을 투명하게 2016.12.23 5290
17 인쇄할때 페이지 나누는 br 태그 2016.12.23 4817
16 웹 브라우저에 [가로 스크롤 안생기게 하기] 2016.12.23 15191
15 중급 사용자를 위한 CSS 선택자에 관한 지식 / CSS에서 마우스 동작을 감지하는 방법 2016.12.22 5001
14 CSS3를 이용하여 둥근모서리 박스 만들기 2016.12.22 5881
13 HTML 목록 태그와 CSS를 활용하여 깔끔한 목록 스타일을 만드는 방법 / CSS list-style file 2016.12.22 6240
Board Pagination Prev 1 2 Next
/ 2

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved