CSS3 : background-size

Description

background-size : [x], [y];
백 그라운 이미지의 크기를 지정한다.
속성 값
[x]% [y]% : 적용되는 요소의 크기에 비례하여 배경 이미지 적용
[x]px [y]px : 절대 크기로 배경 이미지 적용
cover : 배경 이미지를 늘여 적용되는 요소 전체에 표시
contain : 배경 이미지의 가로 세로 비율을 맞춰 요소에 표시할수 있는 최대 크기로 표시

Code

<style type="text/css"> #box_rel{ background-size:40% 70%; -webkit-background-size:40% 70%; -moz-background-size:40% 70%; } #box_abs{ background-size:50px 50px; -webkit-background-size:50px 50px; -moz-background-size:50px 50px; } #box_cover{ background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; } #box_contain{ background-size:contain; -webkit-background-size:contain; -moz-background-size:contain; } </style>

Example

원본 크기
40% 70%
50px 50px
cover
contain

CSS3 : background-size

web on the N screen coForward

이 예제에 대한 대한 의견 쓰기

이 예제에 대한 의견이 없습니다.