[CSS] 배경이미지와 그라데이션 넣는 방법

배경이미지 넣는 법

.header {
  height: 95vh;
  background-image: url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
}

 

전체 뷰포트의 95% 정도로 헤더 위치를 설정합니다.

백그라운드 이미지 url에 이미지 경로를 넣는데 이때 따옴표는 사용하지 않습니다.

백그라운드 사이즈를 커버로 지정하고 포지션을 상단을 기준으로 설정하면

창의 크기가 바뀌어도 상단은 항상 고정되어 나옵니다.

 

그라데이션 넣는 법

https://developer.mozilla.org/ko/docs/Web/CSS/gradient

<gradient> - CSS: Cascading Style Sheets | MDN

background-image: linear-gradient(to right bottom, #7ed56fc4, #28b485c4)

 

background-image에 그라데이션 유형을 적습니다.

 

<그라데이션 유형>

선형 : linear-gradient

원형: radial-gradient

반복: repeating-linear-gradient, repeating-radial-gradient

원뿔: conic-gradient

 

괄호 안에 방향과 색을 입력합니다.

 

<결과물>