c02. CSS 배경 색상 및 배경 이미지

CSS 배경 색상 및 배경 이미지

배경 색상 속성으로, 태그의 배경 색상을 지정합니다.

CSS 에서 색상은 아래의 방법으로 지정합니다.

	색상의 이름으로 지정하는 방법 "blue"
	16진수 값으로 지정하는 방법 "#0000ff"
	RGB 값 (빛의 3원색) "rgb(0,0,255)"

---

배경-이미지 (background-image) 속성은 태그에 배경으로 사용될 이미지를 지정합니다. 

기본 값으로 배경-이미지 속성은 수평방향, 수직방향으로 반복됩니다.

어떤 이미지는 수평 또는 수직의 한쪽 방향으로만 반복되어야 할 때가 있습니다. 

이미지를 수평으로만 반복시키고 수직으로는 반복하지 않게 하려면, 

background-repeat: repeat-x;
 속성을 추가합니다.

배경 이미지를 딱 한번만 나오게 하려면 
background-repeat: no-repeat;
 속성을 추가하면 됩니다.

그런데 이렇게 하면 배경 이미지가 글자와 겹치게 됩니다. 

그래서 배경 이미지 위치를 
background-position: right bottom;
 으로 지정할 수 있습니다.

아래의 예제를 참조합니다.

---

<style>body {background-image: url("https://cdn2.iconfinder.com/data/icons/christmas-hand-drawn-scribbles-icons/512/12-256.png");
background-repeat: repeat-x;
background-position: right bottom;}
h1 {background-color: Aquamarine;}
div.only {background-color: #F5DEB3;}
p {background-color: rgb(192,192,192);} </style>

<h1>h1 태그 배경 색상</h1>
<div class="only"> div 태그 배경 색상
<p>p 태그 배경 색상</p>
div 태그 계속 </div>
<hr />

---

h1 태그 배경 색상

div 태그 배경 색상

p 태그 배경 색상

div 태그 계속

---

[광고] Udemy 동영상 강의로 보기