background 제어하기

• background-image: HTML 요소에 배경 이미지 넣기
    ex) background-image: url("");
  
  
• background-repeat: 배경 이미지 반복 방법
    repeat: 배경 이미지를 가로 세로 양방향 반복함(기본값)
    repeat-x: 배경 이미지를 가로로만 반복함
    repeat-y: 배경 이미지를 세로로만 반복함
    no-repeat: 배경 이미지 반복 안함
  
  
• background-size: 배경 이미지 크기 조정
    auto: 원래 배경 이미지 크기만큼 표시함(기본값)
    contain: 배경 이미지가 요소 크기에 맞게 모두 표시
    cover: 배경 이미지가 요소의 크기에 관계 없이 여백없이 표시
    참조) 배경이미지 사이즈에 숫자 1개만 넣으면 너비 값을 의미하고, 너비 값을 조절하면 높이 값은 자동으로 비율에 맞게 조절된다.
  
  
• background-position: 배경 이미지 위치 조정
    ex) background-position: <가로 위치><세로 위치>
          background-position: center center ➡ 가로 세로 중앙
          background-position: right 150px bottom 100px ➡ 가로는 150px 떨어진 오른쪽, 세로는 100px 떨어진 하단
  
  
• background-attachment: 배경 이미지 고정
    scroll: 배경 이미지가 화면 스크롤과 함께 스크롤됨(기본값)
    fixed: 화면이 스크롤 되어도 배경 이미지가 고정됨
  
  
• background: linear-gradient ➡ 색이 선의 방향으로 변화하는 그라디언트
    value: to top/left/right/bottom, to right bottom, 45deg 등
    ex) background: linear-gradient(to right, red, blue);
  
  
• background: radial-gradient ➡ 색이 원형 또는 타원형으로 변화하는 그라디언트
    ex) background: radial-gradient(모양, 위치, 시작 색상, 종료 색상)
          background: radial-gradient(circle, red, blue, green);
   

그라디언트 사이트: https://webgradients.com/