요소의 배경에 하나 이상의 이미지를 삽입 (주로 1개만 삽입하는 경우가 많다.)
속성 값
값 | 의미 | 기본값 |
none | 이미지 없음 | none |
url("경로") | 이미지 경로(URL) |
배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다.
사용방법
.box{
/* 개별속성 */
background-image: url("./img/i1.jpg"),
url("./img/i2.jpg"),
url("./img/i3.jpg");
}
.box2{
/* 단축속성 */
background: url("./img/i1.jpg") no-repeat,
url("./img/i2.jpg") no-repeat 100px 50px,
url("./img/i3.jpg") repeat-x;
}
하나 이상의 배경 이미지를 삽입할 경우 "," 쉼표로 구분한다. 먼저 작성된 이미지가 더 위에 쌓인다. 이런 "다중 배경 이미지"는 IE8 이하 버전에 사용할 수 없다.
* 반복적으로 나타나는 이미지
.box{
background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png");
width: 750px;
height: 500px;
border: 2px dashed lightgray;
}
요소의 크기를 지정해주었을때 만약 이미지의 크기보다 더 크다면 반복적으로 나타나는 모습을 볼 수 있다. 그래서 이것을 제어하기 위해서 no-repeat을 이용한다.
.box{
background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png");
background-repeat: no-repeat;
width: 750px;
height: 500px;
border: 2px dashed lightgray;
}
'CSS > 속성 - 배경' 카테고리의 다른 글
background-attachment (0) | 2021.01.12 |
---|---|
background-position (0) | 2021.01.12 |
background-repeat (0) | 2021.01.12 |
background-color (0) | 2021.01.12 |
background (0) | 2021.01.12 |