Notice
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

interactive

[CSS3] background-size 속성알아보기 본문

Design

[CSS3] background-size 속성알아보기

동그란우주 2012. 11. 14. 13:44

background-size 속성은 CSS3에서 추가된 속성으로, CSS3 이전에는 처리할 수 없었던 배경 이미지 크기를 조정할 수 있다.

값은 px와 % 같은 단위로 쓸 수 있고, auto, cover, contain과 같은 키워드를 쓸 수도 있다.


*background-size의 지원 브라우저

internet Explorer : 버전9만 지원

firefox, chrome, safari, opera : yes


background-size: 가로크기 세로크기; 

기본값은 auto이며, 요소 배경으로 이미지를 삽입하면 요소 크기와 상관 없이 이미지 원본 크기대로 처리한다.


1. background-size:x px y px;

가로 크기와 세로 크기를 모두 px 단위로 설정하면 설정한 크기대로 설정 된다


2. background-size:x % y%;

적용되는 요소의 크기에 비례하여 배경 이미지 적용


3. background-size:cover;

이미지 크기 비율을 그대로 유지한 상태에서 이미지가 들어 있는 엘리먼트의 가로 또는 세로에 이미지를 맞춘다.

(가로와 세로 중 큰 값에 맞춘다)


4. background-size:contain;

이미지 크기 비율을 그대로 유지한 상태에서 원하는 영역에 전체 이미지가 들어가도록 가장 작은 크기로 이미지 스케일을 조정한다.(가로와 세로 중 큰 값에 맞춘다)



'Design' 카테고리의 다른 글

IR기법(Image Replacement)  (1) 2012.11.26
CSS로 배경투명하게 만들기  (1) 2012.11.15
HTML5 Canvas 기본형태  (0) 2012.10.31
HTML5 Canvas 소개  (0) 2012.10.29
HTML5로 레이아웃 제작하기  (0) 2012.09.07
Comments