CSS3 기초) multiple background

 

 

 

 

css1,2의 경우

배경 이미지가 한 요소에 대해

한 가지만 들어갈 수 있었는데

 

css3 넘어오면서 한 요소에 배경을

무제한으로 넣을 수 있게 되었다.

 

 

넣는 방법은 background와 동일,

다만 추가하는 이미지와

이미지 사이의 구분은

쉼표를 넣어서 한다.

 

 

 

---

 

 

예)

 

 

1. 한 번에 설정

 

  .game { width:300px; height:300px; border: 2px solid red;

          background: url('image2.PNG') no-repeat top right, 
                      url('타쿠-1.jpg') repeat-x 30px 50px,
                      url('타쿠-3.jpg') no-repeat censter,
                      url('image.jpg') repeat-x center bottom;

         }
</style>

 

 

 

 

 

2. 개별로 설정

 

  div { width: 500px; height: 500px; border: 1px solid black;

          background-image:url(타쿠1), url(타쿠2), url(타쿠3);
          background-repeat: repeat-x, no-repeat, no-repeat;
          background-position: 30px 50px, center, top right;