정신과 시간의 방

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>

저작자표시

[CSS] 배경 꾸미기

1. 이미지를 배경에 사용하기

(1) 배경에 이미지 넣기

(2) 배경 이미지 반복

(3) 배경 이미지 위치

(4) 배경 이미지 크기

2. 스스로 해보기

티스토리툴바