1.background-image 프로퍼티
요소에 배경 이미지를 지정
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
}
2.background-repeat 프로퍼티
배경 이미지의 반복을 지정. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다.
설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채운다 -> background-repeat프로퍼티의 기본값이 repeat이기 때문
x/y 축으로만 배경 이미지를 반복할 경우 프로퍼티값에 repeat-x / repeat-y를 설정
반복 출력을 멈추고 싶은 경우, no-repeat를 설정
복수개의 이미지를 설정할 경우, 먼저 설정된 이미지가 전면에 출력된다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/paper.gif");
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h3>background-repeat: no-repeat, repeat;</h3>
</body>
</html>
먼저 설정된 이미지가 전면에 출력이 된다 -> 워드의 맨 앞, 맨 뒤와 비슷한 개념
3.background-size 프로퍼티
배경 이미지의 사이즈 지정. 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있다.
프로퍼티값은 px,%,cover,contain 등을 사용
배경이미지의 width,height 모두 설정 가능. 순서도 동일(하나의 값만 지정한 경우 그 값은 width를 의미)
- px값 지정
지정된 px 값 그대로
background-size: 700px 500px;- %값 지정
지정된 %값에 비례하여 설정
화면을 줄이거나 늘리면 배경이미지의 크기도 변경되어 찌그러지는 현상이 나타남
background-size: 100% 100%;- cover 지정
이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height중 큰 값에 이미지를 맞춤(이미지의 일부가 보이지 않을 수 있다.)
background-size: cover;
- contain 지정
크기 비율을 유지한 상태에서 부모 요소의 영역에 이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 이미지 스케일을 조정
background-size: contain;
주의 - width, height 프로퍼티값은 공백으로 구분 -> 쉼표로 구분시 다른 배경이미지의 너비를 지정하는 것으로 인식된다.
ex)
body {
background-image: url("front.png"), url("back.png");
background-repeat: no-repeat, no-repeat;
background-size: 100%, 500px;
}4.background-attachment 프로퍼티
화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 background-attachment 프로퍼티에 fixed 키워드를 지정
5.background-position 프로퍼티
일반적으로 background-image는 좌상단부터 이미지를 출력한다. 이때 background-position 프로퍼티를 사용하면 이미지의 좌표(xpos, ypos)를 지정 할 수 있다.
기본값은 background-position: 0% 0%;로 배경이미지는 좌측 상단에 위치하게 된다.
6.background-color 프로퍼티
요소의 배경 색상을 지정. 색상값 또는 transparent 키워드를 지정할 수 있다.
.bg-col-white {
background-color: rgb(255, 255, 255);
}
.bg-col-red {
background-color: red;
}7.background Shorthand
background-color/image/repeat/position를 한번에 정의하기 위한 Shorthand Syntax
div {
/* background: color || image || repeat || attachment || position */
background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center;
width: 50vw;
height: 300px;
}