티스토리 뷰

[개발]프로그래밍/css3

[css3] background-repeat - 배경 이미지 반복 방법

좋은 블로그 2021. 4. 14. 10:43
1. 개념
background-repeat - 배경 이미지 반복 방법
background-repeat는 넣으려는 배경 이미지가 요소보다 작을 때 반복처리를 어떻게 해야 할지에 대해 지정 해주는 속성

속성

설명

repeat

채울 때 까지 가로,세로 반복(기본값)

repeat-x

채울 때 까지 가로만 반복

repeat-y

채울 때 까지 세로만 반복

no-repeat

이미지를 한번만 표시하고 반복 없음
2. 태그
background-repeat
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
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
width : 400px ;
height : 150px ;
border : 1px solid #000 ;
background-image : url(monitor.png) ;
}
</style>
</head>
<body>
1
<div style = ' background-repeat : repeat ' > </div>
2
<div style = ' background-repeat : repeat-x ' > </div>
3
<div style = ' background-repeat : repeat-y ' > </div>
4
<div style = ' background-repeat : no-repeat ' > </div>
</body>
</html>
결과 화면
background-repeat 사용 예제
코드 설명
1
background-repeat : repeat ;
background-image를 사용할 때 반복하는 이미지가 div보다 작은 경우일 때 repeat는 가로 세로 반복입니다.
즉 div 요소의 크기만큼 배경 이미지가 채워질 때가지 반복을 하게 됩니다.
기본값으로 만약 background-image를 사용하고 background-repeat를 사용하지 않았을 때는 가로 세로 반복해서 채워지게 됩니다.
2
background-repeat : repeat-x ;
repeat-x는 요소의 크기만큼 채워질 때 가로만 채워지게 됩니다.
3
background-repeat : repeat-y ;
repeat-y는 요소의 크기만큼 채워질 때 세로만 채워지게 됩니다.
4
background-repeat : no-repeat ;
no-repeat는 배경 이미지가 한 번만 표시가 되고 반복이 되지는 않습니다.
저작자표시

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

[css3] background-position - 배경 이미지 위치 조절  (0) 2021.04.15
[css3] background-size - 배경 이미지 크기 조절  (0) 2021.04.15
[css3] background-image - 배경 이미지 삽입  (0) 2021.04.14
[css3] background-clip - 배경색 적용 범위  (0) 2021.04.13
[css3] background-color - 배경 색 지정  (0) 2021.04.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday