[CSS] 배경 (Backgrounds color, image, repaeat)

CSS를 통해 배경을 입히는 방법

박스에 background를 적용할 때 content와 padding에 적용된다.

(margin, border은 제외됨)

 

 

---

백그라운드는 박스 요소 중 padding에 까지만 적용되는걸 인지하고 작업하여야 한다.

 

 

 

---

(배경반복)Background Repaet

CSS에서는 작은 이미지를 배경으로 설정했을 때 화면을 꽉채우며 반복하는 성질이 있다.

 

 

이와 같은 배경보다 작은 이미지를 배경으로 설정하게 되면

 

자동으로 가로와 세로로 반복한다.

이런 그라데이션 이미지와 같은 경우는 x축으로 (가로)방향으로만 반복하는 경우 더 보기 좋아보인다.

 

예시

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

 

 

반복을 없애기 위해선 no-repaet; 값을 주면 된다. (위 예시는 x값으로만 반복값을 주어 적절한 그라데이션을 넣음)

 

예시

body {
  background-image: url("gradient_bg.png");
  background-repeat: no-repeat;
}

 

no-repaet값을 준 출력예제

---

 

CSS background 속성 정리

  background-color: red;                       색상

  background-image: url("img_tree.png");  이미지 삽입
  background-repeat: no-repeat;             반복여부
  background-position: right top;            이미지 위치
  background-attachment: scroll;            이미지가 스크롤을 따라오게함