background-image
요소에 배경 이미지를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
min-height: 102.5px;
}
</style>
</head>
<body>
<div class="container">
<h3>background-image</h3>
</div>
</body>
</html>
background-repeat
배경 이미지의 반복을 지정한다. 수직, 수평, 또는 수직과 수평 모두의 반복을 지정할 수 있다.
background-repeat : repeat-x => x축으로 반복
background-repeat : repeat-y => y축으로 반복
background-repeat : no-repeat => 반복 x
위의 예제에 반복x를 적용하면, 다음과 같다.
background-size
배경 이미지의 사이즈를 지정한다. 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있다.
너비와 높이를 동시에 설정할 수 있다 방법은 다음과 같다.
background-size : width heigh
background-size : cover => 배경이미지의 크기 비율을 유지한 상태에서 부모요소의 width, height 중 큰 값에 배경이미지를 맞춘다. 따라서 이미지의 일부가 보이지 않을 수 있다.
위에 이미지에 background-size, cover를 적용하면 다음과 같이 된다.
width, height중 큰 width에 맞게 이미지가 적용된 것이다.
background-size : contain => 배경이미지의 크기 비율을 유지한 상태에서 부모요소의 영역에 배경이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 이미지 스케일을 조정한다.
background-attachment
일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤된다. 화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 background-attachment 프로퍼티에 fixed 키워드를 지정한다.
background-position
일반적으로 background-image는 좌상단부터 이미지를 출력한다. background-position 프로퍼티를 사용하면 이미지의 좌표를 지정할 수 있다.
background-color
요소의 배경색을 지정한다.
background
축약버전으로 색, 이미지, 반복여부, attachment, position을 한번에 지정할 수 있다.
background : color image repeat attachment position
참고
