다중 배경이미지

배경이미지는 다중으로 겹처 사용할 수 있다. 아래의 실습에 사용한 배경은 패턴과, 꽃이 각자 따로 쓰인거다. 하나의 이미지가 아님.

 

See the Pen 다중 배경 by nilgi (@nilgi) on CodePen.

 

먼저 쓰는게 앞 이미지며 값이다.

background: url(image.png), url(image.jpg); / 주소
background-position: right bottom, left top; / 위치
background-repeat: no-repeat, repeat; / 반복
background-size: 146px 251px, 50px 50px; / 크기 : 가로 세로(하나만 쓰면 가로세로 길이 동일), auto값은 자동크기

 

속기로 사용하자.

background: url(image.png) right bottom no-repeat , url(image.jpg) left top repeat;

크기는 속기에 포함할 수 없다.