이미지를 배경에 사용하기
background-image 속성 값에 url을 넣어 이미지를 삽입한다.
이때 요소에 설정되어 있는 width 와 height 값과 이미지의 값이 맞지 않을 확률이 높다.
이러한 경우
background-size: contain
background-position: center
로 맞추면 원하는 이미지를 비율에 맞게 잘 삽입할 수 있다.
이때, background-position: cover
로 맞추면 비율은 달라지지만 요소에 설정된 너비와 높이값에 맞게 이미지를 삽입할 수 있다.
또한, background-repeat 속성을 사용하면 이미지의 반복 설정을 조절할 수 있다.
background-size
두 개의 속성 값을 줄 수 있다.
200px auto 와 같이 값을 넣었다면
너비는 200px, 본 이미지의 비율에 맞는 height로 조정된다.
background-position
여러 위치에 이미지를 삽입할 수 있다.
퍼센트로 위치를 조정할 수도 있는데, 이 경우 center=50% 50% 가 된다.
배경에 그라데이션 넣기
background 속성 값에 linear-gradient(, ) 를 넣어 그라데이션을 삽입한다.