CSS Backgrounds

CSS background-color

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

/* a valid color name - like "red" */
body {
  background-color: lightblue;
}

/* a HEX value - like "#ff0000" */
#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */


/* an RGB value - like "rgb(255,0,0)" */
#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

 

CSS background-image

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

기본적으로 이미지는 반복되어 전체 요소를 덮습니다.

body {
  background-image: url("paper.gif");
}

Hello World!

This page has an image as the background!

 

CSS background-repeat

background-image으로이 속성은 이미지를 가로 및 세로로 반복합니다.

/* 배경을 가로로 반복 */ 
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Hello World!

Here, a background image is repeated only horizontally!

 

배경 이미지를 한 번만 표시하는 것은 background-repeat: no-repeat으로 지정합니다.

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

 

 

CSS background-position

background-position속성은 배경 이미지의 위치를 ​​지정하는 데 사용됩니다.

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

 

 

CSS background-attachment

background-attachment속성은 배경 이미지를 스크롤할지 아니면 고정 할지를 지정 (나머지 페이지와 함께 스크롤하지 않음)

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

 

 

CSS background - Shorthand property

코드를 단축하기 위해 하나의 단일 속성에 모든 배경 속성을 지정할 수도 있습니다. 이것을 속기 속성이라고합니다.

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