안녕하세요. 오늘은 배경색과 배경범위를 지정하는 background에 대해 알아볼게요.
CSS background
웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에도 배경 지정이 가능해요.
background-color 속성
배경색 지정으로 16진수 or rgb값 또는 색상 이름 사용으로
세밀한 조절(16진수)과 투명도 조절(rgba)을 할 수 있어요.
/*기본형*/
background-color: #000000;
background-color: rgb(0, 128, 0);
background-color: green;background-color는 상속되지않고 기본적으로 웹 문서 요소의 배경색은 투명이에요.
( ≠ 글꼴, 글자 크기는 하위 요소에서 스타일을 수정하지 않는 한 상속)
background-clip 속성
배경색의 적용 범위 조절로 박스 모델에서 테두리, 패팅, 콘텐츠 영역까지 배경색 지정이 가능해요.
다음은 background-clip 속성값과 예제예요.
| border-box | 박스 모델의 가장 외곽인 테두리까지 적용 : 기본값 |
| padding-box | 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 |
| content-box | 박스 모델에서 내용(콘텐츠) 부분에만 적용 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
.desc {
border:5px dotted #222;
background-color:#ffd9a0;
width:350px;
padding:20px;
margin-right:20px;
float:left;
}
#clip-border {
background-clip: border-box;
}
#clip-padding {
background-clip: padding-box;
}
#clip-content {
background-clip: content-box;
}
</style>
</head>
<body>
<div id="container">
<div class="desc" id="clip-border">
<h1>롯데자이언츠</h1>
<p>2023.04.11 <b>사직야구장</b>에서 엘지 트윈스와의 시즌 첫 맞대결이 열린다.</p>
<p>롯데 자이언츠의 선발은 <em>반즈</em>선수로<br>롯데의 외인 투수이다.</p>
</div>
<div class="desc" id="clip-padding">
<h1>롯데자이언츠</h1>
<p>2023.04.11 <b>사직야구장</b>에서 엘지 트윈스와의 시즌 첫 맞대결이 열린다.</p>
<p>롯데 자이언츠의 선발은 <em>반즈</em>선수로<br>롯데의 외인 투수이다.</p>
</div>
<div class="desc" id="clip-content">
<h1>롯데자이언츠</h1>
<p>2023.04.11 <b>사직야구장</b>에서 엘지 트윈스와의 시즌 첫 맞대결이 열린다.</p>
<p>롯데 자이언츠의 선발은 <em>반즈</em>선수로<br>롯데의 외인 투수이다.</p>
</div>
</div>
</body>
</html>
배경 이미지 지정하기: background-image 속성
웹 요소에 배경 이미지 삽입을 할 수 있어 url()에 이미지 파일 경로를 삽입해서 사용이 가능해요.
/*기본형*/
backgroung-image: url('이미지 파일 경로')
다음은 background-image 속성 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body {
background-image :url('../images/css\ 로고.png');
}
</style>
</head>
<body>
</body>
</html>
background-repeat 속성
배경 이미지의 반복방법을 지정으로
가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나반복하지 않고 한 번만 삽입이 가능해요.
| 종류 | 설명 |
| repeat | 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복 : 기본값 |
| repeat-x | 브라우저 화면 너비에 가득 찰 때까지 가로로 반복 |
| repeat-y | 브라우저 화면 너비에 가득 찰 때까지 세로로 반복 |
| no-repeat | 한 번만 표시하고 반복❌ |
background-position 속성
배경 이미지의 위치 조절로 배경 이미지의 수평 위치 또는 수직 위치의 값 지정할 수 있어요.
/*기본형*/
background-position: <수평 위치> <수직 위치>;
수평위치: left | center | right | <백분율> | <길이 값>
수직위치: top | center | bottom | <백분율> | <길이 값>
background-origin 속성
배경 이미지의 적용 범위를 조절해요.
박스 모델에 패딩이나 테두리에 사용으로 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시해요.
| 종류 | 설명 |
| content-box | 박스 모델에서 내용 부분에만 배경 이미지를 표시 : 기본값 |
| padding-box | 박스 모델에서 패딩까지 배경 이미지를 표시 |
| border-box | 박스 모델에서 테두리까지 배경 이미지를 표시 |
background-attachment 속성
배경 이미지 고정하는 친구예요.
배경이미지가 있는 웹 문서를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절할 때 배경이미지를 고정할 수 있어요.
| 종류 | 설명 |
| scroll | 화면을 스크롤하면 배경 이미지도 스크롤 : 기본값 |
| fixed | 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤 |
background 속성
background 속성으로 줄여 사용이 가능해요.
body {
background-image :url('../images/css\ 로고.png');
background-repeat: no-repeat;
background-position: center bottom;
}
→
background: url('../images/css\ 로고.png') no-repeat center bottom;속성값이 다르므로 입력 순서는 상관없어요.
background-size 속성
배경 이미지 크기 조절속성으로 배경을 채울 요소 크기에 비해 이미지가 작거나 클 경우
해당 속성을 사용해 이미지 크기 조절을 할 수 있어요.
속성값이 하나일 경우 그 값은 너비로 인식으로 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산을 해요.
다음은 background-size 속성값과 예제예요.
| auto | 원래 배경 이미지 크기만큼 표시 : 기본값 |
| contain | 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소 |
| cover | 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소 |
| <크기> | 이미지의 너비와 높이를 지정 값이 하나만 주어질 경우 너빗값으로 인식, 이미지의 너비와 너빗값에 맞춘 높잇값도 자동계산 |
| <백분율> | 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정 그 크기에 맞도록 배경 이미지를 확대, 축소 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
#container{
width:1100px;
margin:50px auto;
}
.box{
float:left;
border:1px solid #222;
width:300px;
height:300px;
margin:20px;
background:url('../Chapter08/lotte-black.jpg') no-repeat left top;
}
#bg1 { background-size:auto;} /* 원래 배경 이미지 크기로 표시 */
#bg2 { background-size:200px;} /* 너비는 200px, 높이는 자동 계산 */
#bg3 { background-size:50%;} /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
#bg4 { background-size:100% 100%;} /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */
#bg5 { background-size:contain;} /* 요소 안에 배경 이미지가 다 보이도록 표시 */
#bg6 { background-size:cover;} /* 요소를 완전히 덮도록 배경 이미지 표시 */
</style>
</head>
<body>
<div id="container">
<div class="box" id="bg1"></div>
<div class="box" id="bg2"></div>
<div class="box" id="bg3"></div>
<div class="box" id="bg4"></div>
<div class="box" id="bg5"></div>
<div class="box" id="bg6"></div>
</div>
</body>
</html>
여기까지 CSS background에 대해 알아봤는데요.
배경화면을 꾸미는 종류가 이렇게 많은걸 처음 알았고 잘 배운다면 이쁘게 꾸밀 수 있을 것 같아요.
'Frontend > CSS' 카테고리의 다른 글
| CSS Grid (0) | 2025.10.31 |
|---|---|
| CSS Flexbox (0) | 2025.10.30 |
| CSS position (0) | 2025.10.26 |
| CSS Layout (display / float / clear) (0) | 2025.10.24 |
| CSS margin & padding (0) | 2025.10.22 |