CSS Background

« Previous Next Chapter »

CSS background 성질은 요소의 배경 효과를 정의하는 데 사용됩니다.

background 효과를 위해 사용되는 CSS 성질:

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

Background Color

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

페이지의 배경색은 body selector 에 정의된다.:

Example

body {
    background-color: lightblue;
}
Try it yourself »

CSS 에서 color 는 다음과 같이 정의된다:

  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"
  • an HSL value - like "hsl(0,100%,50%)"
  • a color name - like "red"

가능한 색상 값의 전체 목록. CSS Color Values

In the example below, the h1, p, and div elements have different background colors:

Example

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
Try it yourself »

Background Image

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

기본형으로, 전체 요소를 덮도록 이미지가 반복된다.

페이지의 배경 이미지는 다음과 같이 설정할 수 있습니다 :

Example

body {
    background-image: url("paper.gif");
}
Try it yourself »

다음은 텍스트와 배경 이미지의 나쁜 조합의 예입니다. 텍스트를 거의 읽을 수 없습니다:

Example

body {
    background-image: url("bgdesert.jpg");
}
Try it yourself »

Background Image - 가로 또는 세로로 반복

기본적으로 background-image 속성은 수평 및 수직으로 이미지를 반복합니다.

일부 이미지는 가로 또는 세로로 만 반복해야 합니다, 그렇지 않으면, 다음과 같이 이상하게 보일 것입니다 :

Example

body {
    background-image: url("gradient_bg.png");
}
Try it yourself »

이미지가 가로 방향으로 만 (repeat-x) 반복하는 경우, 배경이 보기에 좋다.

Example

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

Background Image - Set position and no-repeat

Note Note: 배경 이미지를 사용하는 경우, 텍스트를 방해하지 않는 이미지를 사용하라!

한 번만 이미지를 표시하기는 background-repeat 속성에 의해 지정됩니다 :

Example

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

위의 예에서, 배경 이미지는 텍스트와 같은 장소에 표시된다. 텍스트를 방해하지 않도록 하려면, 이미지의 위치를​​ 변경한다.

이미지의 위치는 background-position 속성으로 지정됩니다 :

Example

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

Background - 약식 속성(Shorthand property)

위의 예에서 볼 수 있듯이, 배경을 다룰 때 고려해야 할 여러 속성이 있습니다.

코드를 단축하기 위해, 하나의 속성으로 모든 속성을 지정하는 것도 가능하다. 이는 약식 속성이라고 합니다.

배경에 대한 약식 속성은 단순히 "background" 입니다:

Example

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

약식 속성을 사용하는 경우 속성 값의 순서는 다음과 같습니다:

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

속성 값 중 하나가 누락 된 경우에, 적은 것들이 순서로 된 한, 문제가 되지 않습니다.

This example uses more advanced CSS. Take a look: Advanced example

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example

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

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »

All CSS Background Properties

Property Description
background 모든 background 속성을 하나의 선언으로 지정
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated


« Previous Next Chapter »