[CSS] background

/*PICK YOUR FAVORITE*/

.pick-your-favorite {

  background-image: url("../images/favorite_bg.jpg");

  background-repeat: no-repeat;

  background-position: center;

  background-attachment: fixed;

  background-size: cover;

}

background와 관련된 요소들이 적힌 css 클래스를 가져와봤다.

대부분 코드만 봐도 이해가 가기에 이해가 안가는 부분만 살펴보기로 했다.

-       background-attachment: fixed;

이전에 봤던, position:fixed와 같다. 배경이미지가 지정된 곳에 고정되어 스크롤을 움직여도 위치가 변하지 않는다.

-       background-size

 

See the Pen Untitled by Bockchi Blood (@Bockchi-Blood) on CodePen.

 

 

코드 설명

1.      background-size : auto ;

기본 값에 해당합니다. 원래 배경 이미지 사이즈로 div를 채우게 됩니다.

2.      background-size : contain ;

요소 안에 배경 이미지가 들어오도록 이미지를 확대하는 것입니다.
즉 너비를 확대해서 이미지를 맞추기에 높이가 상대적으로 적은 이미지는 반복을 하게 됩니다

3.      background-size : cover ;

cover는 이미지를 요소를 모두 덮도록 너비 , 높이 모두 다 확대하거나 축소해서 이미지를 맞추게 됩니다.

4.      background-size : 30px 30px ;

너비는 30px , 높이는 30px로 이미지를 설정하게 되면 그만큼 이미지가 나오면서 요소에 이미지가 들어오도록 반복을 하고 있습니다.

5.      background-size : 20% ;

백분율은 요소의 사이즈에 맞게 이미지의 크기를 구해서 배경이미지를 확대하거나 축소해서 표시를 하고 반복합니다.