CSS 배경

배경

---

CSS 배경 속성은 요소에 배경 효과를 추가하는 데 사용됩니다.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

 

background-color

---

body {
  background-color: skyblue;
}

background-color속성은 요소의 배경색을 지정합니다.

태그마다 배경색을 다르게 지정할 수 있습니다.

 

background-image

---

body {
  background-image: url("apple.jpg");
}

background-image속성은 요소의 배경으로 사용할 이미지를 지정합니다.

기본적으로 이미지는 전체 요소를 덮도록 설정됩니다.

background-color와 함께 사용하면 이미지에 배경색이 가려질 수 있습니다. 배경이미지를 조절해 배경을 덮지 못하는 곳이 생기면 배경색이 보이게 됩니다.

 

background-repeat

---

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

반복되는 이미지가 있으면 반복을 수직으로 할 지 수평으로 할 지 결정합니다.

repeat-x는 수평으로 반복 repeat-y는 수평으로 이미지를 반복 출력합니다.

 

background-attachment

---

body {
  background-image: url("apple.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

배경이미지를 스크롤시 화면과 함께 움직일 것인지 화면에 고정시킬지 결정합니다.

fixed 값을 줄 경우 화면이 올라가거나 내려갈 경우 지정된 위치에 고정되고 화면에 계속 보이게됩니다. 하지만 scroll 값을 줄 경우 화면을 올리거나 내릴 때 이미지도 함께 움직이기 때문에 안보이게 될 수 도 있습니다.

 

background

---

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

background를 각각 정해주었지만 한 번에 적용하는 방법입니다.

 

 

출처

W3school

W3Schools.com