1. background-color : 배경 색상 지정
| background-color: #abcdef; |
| 속성 값 |
설명 |
| 색상값 |
색상명, RGB값, RGBA값, HEX값, HSL값, HSLA값 |
| transparent |
투명 (기본값) |
2. background-image : 배경 이미지 지정
| background-image: url(img/baimg.png); |
| 속성 값 |
설명 |
| url(~) |
이미지의 경로와 파일명을 기술 |
| none |
배경 이미지 없음 (기본값) |
3.background-repeat : 배경 이미지의 반복 지정
| background-repeat: no-repeat; |
| 속성 값 |
설명 |
| repeat |
배경 이미지를 가로 세로로 반복하여 배치함 (기본값) |
| no-repeat |
배경 이미지를 한 개만 배치함 (반복 없음) |
| repeat-x |
배경 이미지를 가로로만 반복하여 배치함 |
| repeat-y |
배경 이미지를 세로로만 반복하여 배치함 |
| space |
배경 이미지를 반복하다가 마지막 이미지가 가로로 잘리지 않도록 이미지 사이가 벌어짐 |
| round |
배경 이미지를 반복하다가 마지막 이미지가 세로로 잘리지 않도록 이미지 사이가 벌어짐 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-image</title>
<style>
.image{background-image: url(img/dot.png); width: 100%; height: 200px; border: 1px solid}
.repeatx{background-image: url(img/dot.png); background-repeat: repeat-x; width: 100%; height: 100px; border: 1px solid}
.repeaty{background-image: url(img/dot.png); background-repeat: repeat-y; width: 300px; height: 300px; border: 1px solid}
.norepeat{background-image: url(img/dot.png); background-repeat: no-repeat;width: 100%; height: 200px; border: 1px solid}
</style>
</head>
<body>
<div class="image">
<h3>Background Image</h3>
<h3>background-repeat: repeat (기본값)</h3>
</div>
<div class="repeatx">
<h3>background-repeat: repeat-x</h3>
</div>
<div class="repeaty">
<h3>background-repeat: repeat-y</h3>
</div>
<div class="norepeat">
<h3>background-repeat: no-repeat</h3>
</div>
</body>
</html>
출력 이미지
4. background-position : 배경 이미지 위치 지정
| background-position: 50% top; |
| 위치 |
속성 값 |
| 가로 위치 |
left, right, center, px값, %값 등 (기본값:left) |
| 세로 위치 |
top, bottom, center, px값, %값 등 (기본값:top) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-position</title>
<style>
div{background-image: url(img/dot.png);
background-color: lightyellow;
background-repeat: no-repeat;
width: 200px; height: 200px;
margin:10px 10px; float: left}
div.ex1{background-position: top}
div.ex2{background-position: bottom}
div.ex3{background-position: center}
div.ex4{background-position: left}
div.ex5{background-position: right}
div.ex6{background-position: 25% 75%}
div.ex7{background-position:10px 20px}
div.ex8{background-image: url(img/dot.png), url(img/dot.png) ;background-position: 0px 0px, center}
</style>
</head>
<body>
<div class="default">기본값 (0% 0%) = left top</div>
<div class="ex1">top</div>
<div class="ex2">bottom</div>
<div class="ex3">center</div>
<div class="ex4">left</div>
<div class="ex5">rigth</div>
<div class="ex6">25% 75%</div>
<div class="ex7">10px 20px</div>
<div class="ex8">0px 0px, center</div>
</body>
</html>
출력 이미지
5. background-attachment : 배경 이미지를 요소 내 / 화면 고정 위치 결정
| background-attachment: fixed; |
| 속성 값 |
설명 |
| scroll |
배경 이미지가 요소 바닥에 붙은 것처럼 화면을 스크롤하면 따라감 (기본값) |
| fixed |
배경 이미지가 화면 바닥에 붙은 것처럼 화면을 스크롤해도 따라가지 않음 |
6. background-size : 배경 이미지의 크기를 변경
| background-size: 120px 90px; |
| 속성 값 |
설명 |
원본 비율 |
| background-size: 80px 60px |
배경 이미지 가로 80px, 세로 60px |
찌그러질수 있음 |
| background-size: 150px |
배경 이미지 가로, 세로 150px |
찌그러질수 있음 |
| background-size: 50% 100% |
배경 이미지 가로50%, 세로 100% |
찌그러질수 있음 |
| background-size: auto |
원래 크기로 배치 후 남는 공간은 비움 |
원래 비율 유지 |
| background-size: contain |
이미지가 잘리지 않도록 배치 남는 공간은 비움 |
원래 비율 유지 |
| background-size: cover |
빈공간 없이 요소에 꽉 채우고 나머지는 잘림 |
원래 비율 유지 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-size</title>
<style>
div.bg{height: 150px; margin-bottom: 10px; background-color: lightgray; background-image: url(img/bg_size.png); background-repeat: no-repeat}
div.bg1{background-size: 100px 200px}
div.bg2{background-size: auto}
div.bg3{background-size: 80% 150%}
div.bg4{background-size: cover}
div.bg5{background-size: contain}
</style>
</head>
<body>
<div class="bg bg1">background-size: 100px 200px</div>
<div class="bg bg2">background-size: auto</div>
<div class="bg bg3">background-size: 80% 150%</div>
<div class="bg bg4">background-size: cover</div>
<div class="bg bg5">background-size: contain</div>
</body>
</html>
출력 이미지
댓글