본문 바로가기
css

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

by 지구별에 2014. 5. 29.

 

 

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

 

 

차례 :


background-image
background-repeat
background-attachment
background-position
background-size

background

 

 

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

 

오늘은 배경 이미지 크기를 조절하는 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 )

 

 

 

background-size.htm

 

 

 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>

<div>
산토끼 토끼야 어디를 가느냐
</div>
</body>
</html>

 

 

 

 실행화면

 

 background-size: auto; 실행 화면

 

 

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

 

 

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

 

 

background-size: cover; 실행 화면

 

 

background-size: contain; 실행 화면

 

  

 

 

반응형

댓글2