728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>background-image</title>
<meta charset="UTF-8">
<style>
div:nth-child(1) {
width: 500px;
height: 500px;
background-color: gray;
background-image: url("https://img.freepik.com/free-photo/galaxy-nature-aesthetic-background-starry-sky-mountain-remixed-media_53876-126761.jpg?w=900&t=st=1671592462~exp=1671593062~hmac=d233a958ca051a79dc10b7f4f277bc193a0c717c06acede04f9055d101d167c8");
/* background-image : 배경 이미지를 삽입할 때 사용한다. url 함수와 함께 사용한다. url("주소")*/
background-position: center;
/* background-position: 배경 이미지 위치 설정
background-position: a; 양방향에 대한 설정
background-position: x y; x축, y축에 대한설정
*/
background-repeat: no-repeat;
/* background-repeat: 배경 이미지 반복 설정
repeat : 반복되게 한다.(기분값)
repeat-x : 가로축으로만 반복되게 한다.
repeat-y : 세로축으로만 반복되게 한다.
no-repeat: 반복되지 않게 한다.
*/
background-size: 500px 200px;
/* background-size: 배경 크기 설정
(리터럴) : 가로크기 설정 후 세로크기는 이미지 비율에 맞게 증감
(리터럴)(리터럴) : 가로/세로 크기 지정. 이미지 비율 문제 발생
auto (리터럴) : 세로크기 설정. 가로크기는 이미지 비율에 맞게 증감
contain : 이미지가 잘리지 않는 한도 내에서 가장 큰 크기 ( 요소 벗어날 수 없음)
cover : 요소의 빈 부분 없이 이미지를 표시할 수 있는 가장 작은 크기(요소 벗어날 수 있음)
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
728x90
반응형