① background-image 속성
<head>
<style>
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
} /* url 안에 이미지가 위치한 주소 적기 */
</style>
</head>- 상속되지 않음
- 이미지가 제대로 표시되지 않을 경우를 대비하여 background-color를 지정하는 것도 좋음
- 복수개의 이미지를 표시할 경우, 콤마(,)로 구분하고 먼저 설정된 이미지가 전면에 출력
② background-repeat 속성
주로 background-image 속성과 함께 사용하며, 이미지를 어떻게 배열할지 선택
background-repeat: repeat;: 가로 세로 반복적으로 배열 (기본값)background-repeat: repeat-x;: 이미지가 가로로만 반복해서 배열background-repeat: repeat-y;: 이미지가 세로로만 반복해서 배열background-repeat: no-repeat;: 이미지가 반복 배열되지 않음
③ background-size 속성
배경 이미지의 사이즈를 지정.
배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있음.
background-size: auto;: 배경 이미지 원래의 width, height 그대로 표시 (기본값)background-size: 700px 500px;(예시) : 첫번째 값은 width, 두번째 값은 height이고 하나의 값만을 지정했다면 width를 의미하게되며 height는 auto로 지정background-size: 100% 100%;(예시) : width와 height를 부모 요소에 비례한 %값으로 지정background-size: cover;: 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰 값에 배경 이미지를 맞춤background-size: contain;: 배경 이미지 크기 비율을 유지한 상태에서 내용 안쪽에 보이지 않는 부분 없이 전체가 들어갈 수 있도록 이미지 스케일을 조정
width, height 속성값은 공백으로 구분!
쉼표로 구분하면 다른 배경 이미지의 너비를 지정하는 것으로 인식.
body {
background-image: url("front.png"), url("back.png");
background-repeat: no-repeat, no-repeat;
background-size: 100%, 500px;
}④ background-attachment 속성
배경 이미지 고정 방식.
일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤 됨.
background-attachment: fixed;: 스크롤바를 내려도 배경 이미지는 스크롤 되지 않고 위치 그대로.
⑤ background-position 속성
background-position: 가로 세로;의 형식으로 나타내어지며,
기본값은 background-position: left top;
가로 속성값은 left, center, right으로, 세로 속성값은 top, center, bottom으로 구분.
따로 명시하지 않으면 자동으로 center가 되고, background-position: center;은 가로 세로 중앙 위치.
⑥ background-color 속성
배경 색상을 지정.
.bg-col-white {
background-color: rgb(255, 255, 255);
}
.bg-col-red {
background-color: red;
}⑦ background Shorthand
배경의 color, image, repeat, attachment, position을 한꺼번에 정의할 수 있음
background: color || image || repeat || attachment || position
🎁 참조 및 출처
무엇이든 할 수 있고, 무엇이든 될 수 있는