background와 관련된 속성은 다음과 같습니다.
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
background-color(출처 : w3schools 링크 클릭)
배경 색상을 설정하는 속성
CSS문법
| background-color : color | transparent | initial | inherit; |
속성 값
| 값 | 설명 |
| color | 색상으로 지정된 이름(red,blue 등), 색상코드(#ffffff), 함수값(rgb(255,0,0) 중 하나를 입력 |
| transparent | 투명, 기본값 |
| inital | 기본값으로 초기화 |
| inherit | 부모 요소의 값을 상속받음 |
브라우저별 지원
브라우저별 지원 가능한 최소 버전
| 크롬 | 익스폴로러/엣지 | 파이어폭스 | 사파리 | 오페라 |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<style>
#box1{ background-color: red; }
#box2{ background-color: #ff0000;}
#box3{ background-color: rgb(255,0,0);}
.box{
width: 50px;
height: 50px;
display: inline-block;
border: 1px solid while;
}
</style>
</head>
<body>
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box" id="box3">box3</div>
</body>
</html>
|
결과
box1
box2
box3
background-image(출처 : w3schools 링크 클릭)
배경 이미지를 설정하는 속성으로 url함수를 통해 이미지를 불러옴
CSS 문법
| background-image: url|none|initial|inherit; |
속성 값
| 값 | 설명 |
| url('URL') | URL에 있는 이미지 |
| none | 배경 이미지 설정을 안함. 기본값 |
| linear-gradient(색상,...,색상) | 두가지 이상의 색상으로 top에서 bottom으로 퍼져나가는 그라데이을 배경에 적용 |
| radial-gradient(색상,...,색상) | 두가지 이상의 색상으로 중심에서 가장자리로 퍼져나가는 그라데이션을 배경에 적용 |
| repeating-linear-gradient(색상,...,색상) | linear-gradient()을 반복 |
| repeating-radial-gradient(색상,...,색상) | radial-gradient()을 반복 |
| initial | 기본값으로 초기화 |
| inherit | 부모 요소의 값을 상속받음 |
브라우저별 지원
브라우저별 지원 가능한 최소 버전
| 크롬 | 익스폴로러/엣지 | 파이어폭스 | 사파리 | 오페라 |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
예제