brunch

CSS - 배경색상, 이미지 설정

background-color, image, repeat

by 훈오빵

◼︎ 배경색상 설정하기

background-color:#yellow;

<h3>캠핑장 9월 예약</h3>
<ul>
<li>9월분 예약 2019년 8월 16일(수) 14:00부터~</li>
<li>문의전화 : 031-222-1234</li>
</ul>
<div id='button'>
자세히 보기 >
</div>

...

body {
background-color:#yellow;
}

#button {
width: 120px;
height: 25px;
padding: 8px;
background-color: blue;
color:# white;
text-align: center;
}


◼︎ 배경이미지 삽입하기

background-image: url('img/bg.jpg')

<h3>개똥지빠귀 새</h3>
<img src='img/bird.jpg'>

...
body {
background-image: url('img/bg.jpg');
}
h3 {
background-color:#yellow;
padding: 8px;
}


◼︎ 배경이미지 반복설정

background-repeat: no-repeat | repeat-x | repeat-y

- no-repeat : 배경이미지를 반복하지 않고 한번만 적용

- repeat-x : 배경이미지를 가로방향으로 반복 적용

- repeat-y : 배경이미지를 세로방향으로 반복 적용


<끝>








keyword
매거진의 이전글CSS - 박스모델(Box Model)