티스토리 뷰

[개발]프로그래밍/css3

[css3] background-size - 배경 이미지 크기 조절

좋은 블로그 2021. 4. 15. 10:41
1. 개념
background-size - 배경 이미지 크기 조절
background-size는 배경 이미지를 여러 크기로 조절 할 수 있음

속성

설명

auto

원래 배경 이미지 크기만큼 표시(기본 값)

contain

지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소

cover

지정한 요소를 다 덮도록 배경이미지를 확대/축소

크기 값

너비 값과 높이 값을 지정

백분율

지정한 요소를 기준으로 백분율 값을 지정
2. 태그
background-size
html5 코드
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
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
width : 300px ;
height : 300px ;
background-image : url(monitor.png) ;
border : 1px solid #000 ;
display : inline-block ;
}
</style>
</head>
<body>
1
<div style = ' background-size : auto ' > </div>
2
<div style = ' background-size : contain ' > </div>
3
<div style = ' background-size : cover ' > </div>
4
<div style = ' background-size : 30px 30px ' > </div>
5
<div style = ' background-size : 20% ' > </div>
</body>
</html>
결과 화면
background-size 사용 예제
코드 설명
1
background-size : auto ;
기본 값에 해당합니다.
모니터 사이즈는 100*89의 사이즈로 auto로 설정을 하게 되면 원래 배경 이미지 사이즈로 div를 채우게 됩니다.
2
background-size : contain ;
2번이 contain 일 때 보는 것인데 3번하고 약간 차이가 있는게 너비가 100px이고 높이가 89px 이기에 요소 안에 배경 이미지가 들어오도록 이미지를 확대하는 것입니다.
즉 너비를 확대해서 이미지를 맞추기에 높이가 상대적으로 적은 이미지는 반복을 하게 됩니다
3
background-size : cover ;
cover는 이미지를 요소를 모두 덮도록 너비 , 높이 모두 다 확대하거나 축소해서 이미지를 맞추게 됩니다.
4
background-size : 30px 30px ;
너비는 30px , 높이는 30px로 이미지를 설정하게 되면 그만큼 이미지가 나오면서 요소에 이미지가 들어오도록 반복을 하고 있습니다.
5
background-size : 20% ;
백분율은 요소의 사이즈에 맞게 이미지의 크기를 구해서 배경이미지를 확대하거나 축소해서 표시를 하게 됩니다.
현재 div 요소의 사이즈는 300*300 으로 이미지는 60*60의 사이즈로 반복을 하게 됩니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] background-origin - 배경 이미지 배치 기준 조절  (0) 2021.04.16
[css3] background-position - 배경 이미지 위치 조절  (0) 2021.04.15
[css3] background-repeat - 배경 이미지 반복 방법  (0) 2021.04.14
[css3] background-image - 배경 이미지 삽입  (0) 2021.04.14
[css3] background-clip - 배경색 적용 범위  (0) 2021.04.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday