1. 이미지를 배경에 사용하기
(1) 배경에 이미지 넣기
background-image: url(이미지의 상대 or 절대 주소);
(2) 배경 이미지 반복
background-repeat: repeat;
/* 속성 (default는 repeat)
no-repeat, repeat-x, repeat-y, space(이미지들이 띄엄띄엄 반복)
round(반복되는 이미지가 짤리지 않고, 이쁘게 반복되도록, 이미지 찌그러지지 않는 선에서 크기 변화해서 반복)
속성 2개 반복해서 쓸 수 있음
그러면 첫 번째 속성은 가로에만 적용, 두 번째 속성은 세로에만 적용
*/
(3) 배경 이미지 위치
background-position: top;
/*위치 2개 반복 가능(top left -> 좌상단),
center는 중앙
퍼센트로도 표현 가능 50% 50% 는 가로 길이 중 중앙, 세로 길이 중 중앙
bottom 10px right 3vx
> 바닥으로 부터 10px 떨어진 곳, 오른쪽에서 3vw 떨어진 곳*/
(4) 배경 이미지 크기
background-size: auto;
/* default는 auto
auto 혼자 쓰이면? > 원래 사진 사이즈 그대로
10% -> 가로 세로 전부 원래 크기의 10%
100px 150px -> 가로 100px, 세로 150px
200px auto -> 가로 200px, 세로는 가로에 맞춰서 사진 찌그러지지 않는 크기
<중요!>
contain: 사진의 너비가 더 길면 사진 너비를 부모 요소 너비 크기까지 키운다.
사진의 높이가 더 길면 사진 높이를 부모 요소 높이 까지 키운다.
이 경우 나머지 한 면은 찌그러지지 않는 선에서 커진다.
cover: 부모 요소 다 덮을 정도로 크기 키움!
이때 사진의 원하는 부분이 안 나올 수 있으므로, background-position으로 위치 조정 필요
*/
2. 스스로 해보기
.outer{
background-color: black;
width: calc(100vh - 16px);
height: calc(100vh - 16px);
color: azure;
border-radius: 50%;
overflow: hidden;
}
.inner{
background-image: url(https://showcases.yalco.kr/html-css/02-08/images/mona-lisa.jpg);
height: 100%;
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습 페이지 </title>
<link rel="stylesheet" href="1_style.css">
</head>
<body>
<div class="outer">
안녕하셉숀
<div class="inner">
안녕하세요
</div>
</div>
</body>
</html>
