티스토리 뷰

[개발]프로그래밍/css3

[css3] background-position - 배경 이미지 위치 조절

좋은 블로그 2021. 4. 15. 11:09
1. 개념
background-position - 배경 이미지 위치 조절
background-position는 수평 위치 값과 수직 위치 값을 표시해 이미지의 위치를 지정할 수 있음
하나의 이미지를 가지고 해야 하기에 background-repeat는 no-repeat으로 반복이 없게 함

속성

설명

수평 위치

left / center / right / 백분율 값 / 길이 값

수평 위치

top / center / bottom / 백분율 값/ 길이 값
2. 태그
background-position
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
<! 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) ;
background-repeat : no-repeat ;
border : 1px solid #000 ;
display : inline-block ;
}
</style>
</head>
<body>
1
<div style = ' background-position : right center ' > </div>
2
<div style = ' background-position : left bottom ' > </div>
3
<div style = ' background-position : 10px 50px ' > </div>
4
<div style = ' background-position : 10% 20% ' > </div>
</body>
</html>
결과 화면
background-position 사용 예제

코드 설명
1
background-position : right center ;
앞에 있는 값은 수평 위치에 해당하는 값으로 왼쪽 가운데 오른쪽 중에서 right라는 오른쪽을 주었습니다.
뒤에 있는 값은 수직 값으로 top center bottom 중 center를 주어서 가운데로 이미지를 위치하도록 지정하였습니다.
2
background-position : left bottom ;
left bottom은 수평으로는 왼쪽으로 수직으로는 아래쪽에 이미지가 위치하도록 지정하였습니다.
3
background-position : 10px 50px ;
1,2번처럼 키워드가 아니라 크기값을 주어서도 위치를 설정할 수 있습니다.
10px 50px를 준다고 하면 왼쪽 위를 (0,0)으로 잡아서 거기서 부터 왼쪽으로 10px , 아래쪽으로 50px 위치에 이미지를 위치하게 합니다.
4
background-position : 10% 20% ;
백분율을 할 때는 해당 요소의 크기를 가져와서 거기서 백분율에 해당하는 값을 구한 후에 이미지를 위치시켜 줍니다.
저작자표시

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

[css3] background - 하나의 속성으로 배경 이미지 설정  (0) 2021.04.16
[css3] background-origin - 배경 이미지 배치 기준 조절  (0) 2021.04.16
[css3] background-size - 배경 이미지 크기 조절  (0) 2021.04.15
[css3] background-repeat - 배경 이미지 반복 방법  (0) 2021.04.14
[css3] background-image - 배경 이미지 삽입  (0) 2021.04.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday