[html/css]background-size 속성(배경이미지 크기 조절)

[html/css]background-size 속성(배경이미지 크기 조절)

차례 :

배경 이미지에 대한 속성을 다뤄 보고 있습니다.

오늘은 배경 이미지 크기를 조절하는 background-size 속성입니다.

나머지 하나만 다루면 배경 이미지에 대한 것은 모두 끝나네요^^ 모두 힘 내세요!^^

background-size 속성

우선 배경 이미지 크기(너비와, 높이)를 조절하는 이 속성은 아래 브라우저에서만 지원합니다.

IE9+, Firefox, Opera, Chrome, and Safari

▶속성값

auto 기본값으로 배경 이미지 원래의 width, height 그대로 표시

길이 px, cm 등의 단위로 배경 이미지의 width와 height 설정
첫번째 값은 width, 두번째 값은 height / 한가지 값만 지정하면 나머지는 자동으로 auto

% 너비와 높이를 부모 요소에 비례한 % 값으로 지정

첫번째는 width, 두번째는 height 한가지만 지정하면 나머지는 자동으로 auto

cover 배경 지역이 배경이미지로 완전히 덮이도록 이미지를 가능한한 크게 해서 표시
때문에 이미지의 일부분이 보이지 않을 수도 있음

contain 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절 함.

initial 기본값으로 초기화

상속 여부 NO

예 1)

body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-size: 100px 100px;
}

예 2)

body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-size: 50% 50%;

}

예 3)

body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-size: cover;
}

예 4)

body
{
background-image:url('brabbit.png');
background-repeat:no-repeat;
background-size: cotain;
}

html/css를 작성해 볼 텐데요

아래 예제에서는, 가로 300px 높이 300px인 박스를 하나 만들어

그 안에 배경 이미지를 넣어 보겠습니다

배경 이미지로 넣을 사진입니다(301x224 )

html/css

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 300px;
height: 300px;
border: 1px solid green;

background-image:url('flower.png');
background-repeat:no-repeat;
background-size: auto;
}

</style>
</head>

<body>

실행화면

background-size: auto; 실행 화면

background-size: 100px 100px; 실행 화면

background-size: 50% 50%; 실행 화면

background-size: cover; 실행 화면

background-size: contain; 실행 화면

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE (1)	2014.06.02
[html/css]background 속성(배경 전체 지정) (1)	2014.05.30
[html/css] line-height 속성 배우기 (6)	2014.05.27
[html/css]background-position 속성(배경이미지 위치 지정) (5)	2014.05.26
[html/css]background-attachment 속성(배경이미지 고정) (4)	2014.05.23