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;}
<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
