여러 배경 이미지의 크기 정의

이 background-size속성은 여러 배경으로 작업 할 때 쉼표로 구분 된 목록을 사용하여 여러 배경 크기 값을 허용합니다.

다음 예제에는 세 가지 배경 이미지가 있으며 각 이미지의 배경 크기 값이 다릅니다.

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
} 

<!DOCTYPE html>

<html>

<head>

<style> 

#example1 {

    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

    padding: 15px;

    background-size: 50px, 130px, auto;

}

</style>

</head>

<body>

<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>