[CSS] 배경 꾸미기 - background-image, 그라데이션

background-image

• background-repeat : repeat, no-repeat, repeat-x, repeat-y, space, round, 2개(x축 y축)
• background-position : top, center,bottom,left,right, bottom 10px right 3vw
• background-size : auto, contain, cover, 10% 

ex) 

한가지 문제점은

outer의 radius를 50%로 지정해주었지만 with-bg가 오버플로우가 일어나 화면에서 적용이 안되었다.

이를 해결하기 위해 outer의 overflow:hidden을 설정해주어야 한다.

 

 그라데이션(linear-gradient)

• background: linear-gradient(gold,tomato) - 위에서 아래로 그라데이션
• background: linear-gradient(90deg, gold,tomato) - 왼에서 오른쪽으로 그라데이션
• background: linear-gradient(gold 10% ,tomato30%, blue 70% ) - 색상 % 조절 가능

추가로 알아보기

• 👉 gradient 전반
• 👉 linear-gradient 더 보기
• 👉 radial-gradient
• 👉 conic-gradient
• 👉 repeating-linear-gradient
• 👉 repeating-radial-gradient