brunch

You can make anything
by writing

C.S.Lewis

by 훈오빵 Apr 07. 2021

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

background-color, image, repeat

◼︎ 배경색상 설정하기

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 : 배경이미지를 세로방향으로 반복 적용


<끝>


   






매거진의 이전글 CSS - 박스모델(Box Model)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari