CSS 기초강좌 4 (Background 속성)


CSS Background

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


배경효과에 사용되는 CSS 속성

 * background-color

 * background-image

 * background-repeat

 * background-attachment

 * background-position



background-color : 속성은 요소의 배경색깔을 지정하는데 사용합니다.

background-image : 속성은 요소의 배경으로 이미지를 지정하는데 사용합니다. 기본적으로 설정이 없으면 이미지는 반복 표시됩니다.

이미지의 반복효과를 가로나 세로방향으로만 표시하고 싶을때는 background-repeat 속성을 사용합니다.

(속성값) : repeat-x, repeat-y, no-repeat


body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}


background-position : 이미지의 위치를 조절할때 사용합니다.

(속성값) : left top : 왼쪽 세로위

              left center :왼쪽 세로중앙

              left bottom :왼쪽 세로바닥

              right top  :오른쪽 세로위

              right center :오른쪽 세로중앙

              right bottom :오른쪽 세로바닥

              center top : 중앙 세로위

              center center : 중앙 세로중앙

              center bottom :중앙 세로바닥

(속성값) : x% y% -> 50% 50%    x위치 y위치 -> 10px 200px 등


위에서 본것 처럼 background속성은 background-color, background-image,... 등 여러가지가 있습니다.

이들 속성은 단순히 "background"만 써서 단축형으로 사용할 수도 있습니다.

단축형 background는 다음과 같은 순서로 정의되어야합니다. (속성값이 없는 것은 관계없습니다.)

※ color->image->repeat->attachment->position


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


Example

<html>

<head>

<style>

div.test_bg

{

  width:96.5%;

  border:1px solid gray;

  padding:8px;

  background:#e1efbb url('https://t1.daumcdn.net/cfile/tistory/241DCD3B5270BC0A2F')

  no-repeat bottom right;

}

</style>

</head>


<body>

<div class="test_bg">

  <p style="margin-right:150px;">

     CSS background 속성은 요소에 배경효과를 지정하는데 사용됩니다.</p>

  <p>배경효과에 사용되는 CSS 속성 :</p>

  <ul>

<li>background-color</li>

<li>background-image</li>

<li>background-repeat</li>

<li>background-attachment</li>

<li>background-position</li>

  </ul>

</div>

</body>

</html>



결과

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

배경효과에 사용되는 CSS 속성 :

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


디자인/CSS 강좌 다른 글

댓글 1

    • 프로필사진 지나가는 1ㅅ

      2016.02.29 16:59

      div.test_bg 는 뭔가요? .test_bg랑 뭐가다른거져?

*

*