디자인/html·css

[CSS] background-image 배경 이미지 여러개 넣기

반응형

한 div에 여러 배경이미지를 넣고 싶은 경우 아래처럼

- background-image:에 url을 콤마로 구문하여 넣어주고

- background-size나 background-position도 배경 이미지 순서에 맞추어 순선대로 넣어주면 된다. 

- 동일한 옵션인 경우에는 콤마로 두번 입력할 필요 없이 한번만 입력하면 된다. (background-repeat:no-repeat;)

.section1 {
    background-image:url('../img/main_bg1.png'), url('../img/main_bg2.png');
    background-size:auto 300px, auto 196px;
    background-position:-100px 870px, right bottom 250px;
    background-repeat:no-repeat;
}

 

반응형