css3 기초) background-size

 

 

 

 

{ background-size: ;}

 

 

css에 생긴 기능으로

원하는 영역 안에서

이미지의 크기를 설정

할 수 있는 속성.

 

 

*이미지의 가로 세로 비율이

다른 파일을 샘플로 연습하면

더 확실하게 용도를 알 수 있게 된다.

 

 

 

---

 

 

 

넣을 수 있는 값

 

 

 

1. px / % / auto

 

ⓐ 가로, 세로 각각

두 값을 지정해

넣으면 된다.

 

예) 가로 px 세로 px;

: 10px 26px;

: auto 100px;

: 100% auto;

 

 

ⓑ 숫자를 하나만 넣을 경우에는

(예: 50px ;)

가로 값은 50px, 세로 값은

가로 사이즈에 비례해서

자동화 설정된다.

 

 

 

---

 

 

2. cover / contain

 

cover:

이미지의 가로 세로 비율을 깨뜨리지 않고

박스의 영역을 꽉 채운다.

박스 비율에 따라 이미지의 일부만이

보일 수 있다.

 

 

contain:

이미지가 주어진 영역을 꽉 못 채워도

그 영역 안에 이미지 전체를 다 보여준다.

 

 

 

---

 

 

*주의 사항

 

 

 

div {
      width: 800px; height: 300px;
      border: 1px solid red;
      background: url(타쿠.jpg) no-repeat;
      background-size: cover;
    }
  </style>

  <div></div>

 

 

 

전에 background를 배웠을 때

background 속성 안에 여러 값 들을

한 번에 넣을 수 있었는데

size 만큼은 함께 넣을 수 없다.

 

 

위 코드처럼 반드시

두 속성을 따로 입력해야 하며

쉼표(,)로 멀티 입력이 가능했듯

background-size 역시 멀티 입력이

가능하다.

 

 

예)

 

  div {
      width: 800px; height: 300px;
      border: 1px solid red;
      background: url(타쿠.jpg) no-repeat,
                  url(타쿠1.jpg) no-repeat,
                  url(타쿠2.jpg) no-repeat;
      background-size: contain, 20px 50px, auto 100%;
    }