[속성] background-image 외 속성들
학습일 : 2022. 09. 07
background-image 속성
어떠한 요소의 배경 이미지를 지정하기 위해 사용한다.
이때 배경 이미지는 <img> 태그와 달리 태그가 아니므로 공간을 차지하지 않는다.
항시 url("주소") 함수와 함께 사용한다. (쌍따옴표 있어야함)
콤마(,)로 구분하여 여러개의 배경 이미지를 지정할 수 있는데, 먼저 적은 배경이미지가 위로 올라온다.
용법(한 개)
... {
background-image: url("이미지 주소");
}용법(여러개)
... {
background-image: url("이미지 주소 1"), url("이미지 주소 2"),...;
}background-position 속성
표시되는 배경 이미지의 기준이 되는 위치를 지정한다.
"background-image" 속성이 없다면 의미없음.
용법 (한 개)
... {
background-position: [top|right|bottom|left|center];
}용법 (두 개)
... {
background-position: [top|bottom|center] [right|left|center];
}background-repeat 속성
배경 이미지의 반복과 관련된 설정이다.
값 repeat-x : X축으로만 반복한다.
값 repeat-y : Y축으로만 반복한다.
값 repeat : X축과 Y축으로 반복한다. (기본값)
값 no-repeat : 반복하지 않는다.
용법 (한 개)
... {
background-repeat: [repeat-x|repeat-y|repeat|no-repeat];
}용법 (두 개)
... {
background-repeat: [X축 반복 설정 : repeat|no-repeat] [Y축 반복 설정 : repeat|no-repeat];
}background-size 속성
배경 이미지의 크기를 지정하기 위해 사용한다.
용법
... {
background-size: [?px|?rem|?vw|?vh|?%|...];
}
위 용법에서 퍼센트(%)는 배경 이미지를 포함하는 요소의 가로 크기에 대한 비율이다. 이 때 세로크기는 설정한 가로크기에 맞게(찌그러지지 않게) 자동으로 설정된다.
용법
... {
background-size: [가로 크기 : ?px|?rem|?vw|?vh|?%|...] [세로 크기 : ?px|?rem|?vw|?vh|?%|...];
}
위 용법에서 퍼센트(%)는 배경 이미지를 포함하는 요소의 가로와 세로크기에 대한 비율이다. 단, 비율이 깨어질 수 있음으로 사용에 유의한다.
용법
... {
background-size: [cover|contain];
}
contain : 배경 이미지가 요소의 크기 내에서 잘리는 부분 없이, 표시할 수 있는 가장 큰 크기를 가지게 된다.
cover : 배경 이미지가 요소의 빈 공간을 모두 덮을 수 있는 한도 내에서 가장 작은 크기를 가지게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-image 속성</title>
<style>
body {
margin: 0;
}
.box {
width: 100vw;
height: 100vh;
background-image: url("resources/images/background-image.jpg");❤
background-position: center;❤
background-repeat: no-repeat;❤
background-size: cover;❤
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>==============실행결과================
