html | 백그라운드조정

사이즈를 조정할수도 있다.

background-size: 400px 300px;
중요한것은
background-size: cover; 을 하면 비율이 깨지지 않고, 요소중심으로 커진다.
background-size: contain; 을 하면 이미지 중심으로 크기에 맞게 늘여준다.

실습

#clip_origin{width:100px;height:100px;padding:50px;border:50px dotted #000;}

이렇게 하면 사실 크기는 300*300 이다.

ie6을 제외하고 background-color는 padding까지 간다.

margin은 당연히 아니고..

여기서 패딩을 보고 싶다.. 원래 이미지 사이즈를 보고 싶다..

결론 : 원래 이미지는 보더까지다. 당연한거임..

#clip_origin { width: 100px; height: 100px; padding: 50px; border: 50px solid #000; background-color: skyblue; background-clip: content-box; background-image: url(img/bigbang_poster.jpg); background-origin: content-box;}
background-clip: border-box;
뒷배경이 족용되는 영역을 지정한다.

그래서

background-clip: padding-box;  혹은

background-clip: content-box;를 넣어보면 다 틀리다.

background-origin: content-box;배경이미지의 시작점을 지정할 수 있다.background-image: url(img/bigbang_poster.jpg);
그래서 이런것들을 잘 이용하면, 뒷배경을 색, 이미지, 투명을 겹쳐서 표현하는 것들이 다 가능하다.