CSS - background

요소의 배경에 색상이나 이미지, 이미지의 크기나 배열 등을 설정하는 속성.

 

색상 설정, background-color 속성

background: red;

 

그라이언트 색상 설정

background: linear-gradient(180deg, #d1a85a, #11c4db);

linear-gradient(방향, 시작 색상, 종료 색상)

background: radial-gradient(#d1a85a, #11c4db);

radial-gradient(중심부 색상, 바깥 색상)

 

 

 

 

 

 

background: no-repeat center/40% url("./smile.png");

• no-repeat: 이미지를 한번만 출력. background-repeat 속성. 이미지의 반복을 설정하는 속성.
  • no-repeat: 이미지를 한번만 출력.
  • repeat: 이미지를 반복적으로 출력해서 요소 배경을 꽉 채운다.
    

    

    
    
  • repeat-x: x축 방향으로만 반복
    

    

  • repeat-y: y축 방향으로만 반복
    

    

  • space: 일정 간격을 두고 배경이 채워지도록 배치
    

    

  • round: 공백없이 이미지를 늘려 채움
    

    

  • 위 값 중 2개를 조합하여 "X축 방향 Y축 방향" 으로 설정할 수 있다.
    

    

    repeat space

• center: 가운데 배치. background-position 속성
  • top, left, center, right, bottom 등의 값을 가질 수 있으며 좌상단 기준으로 퍼센트 값을 줄 수도 있다. 예를 들어 25% 75%면 좌측에서 25% 위치, 상단에서 75% 위치에 이동 시킬 수 있다. 더 자세히 가장자리 위치를 지정해 줄 수도 있다. 아래 예처럼 right 35% bottom 10%면 우측에서 35%, 바닥에서 10% 자리에 위치시킬 수 있다.
    

    

    right 35% bottom 10%

    
    
• 40%: 이미지 사이즈. background-size 속성
  • contain: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
    

    

    
    
  • cover: 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로 세로비가 요소와 다르면 이미지를 세로 또는 가로 방향으로 잘라 빈 공간이 생기지 않도록 설정
    

    

  • auto: 이미지 원본 크기를 유지
    

    

  • length: px, em 등의 단위로 설정
    

    

    40px

  • percentage: 요소 대비 크기 설정
    

    

    20%

• url: 이미지 파일 지정. background-image 속성
  • 아래와 같이 설정하면 여러 이미지를 중첩해서 그릴 수 있다.
    • background-image: url("./smile.png"), url("./angry.png");
      

      

      
      
  • 아래와 같이 설정하면 색상과 이미지를 중첩해서 그릴수 있다.
    • background-image: linear-gradient(180deg, #d1a85a, #11c4db), url("./smile.png");