CSS 백그라운드 속성 - 크기와 위치지정

앞장에 이어 원하는 이미지의 크기와 위치를 지정하는 방법입니다.

CSS 백그라운드 속성 -이미지 삽입과 반복

원하는 이미지를 구하거나 만들고 나서도 이미지를 넣고나면

원하는 구조가 안나올때가 많습니다.

위의 이미지는 70px의 크기입니다.

이미지 변경없이 삽입

background-size:200px 100px

background-size:100%

   위 크기조절 방법의 소스입니다.  

 

   #img1, #img2, #img3{border:1px solid #BCE55C; width:250px; height:250px;;        background:#F6FFCC;

   background-image:url

   ("https://t1.daumcdn.net/cfile/tistory/2542C54E58943CF205"); 

   background-repeat:no-repeat;}

 

  #img2{background-size:200px 100px;  }

   #img3{background-size:100%;}

   #a> div p { font-size:16px; font-weight:bold; 

     text-align:center; line-height:420px;}

위의 내용처럼 background-size 속성으로 조절할 수 있지만

그림의 크기가 원하는 배경과 다를 때입니다.

이때 사용하는 속성으로 cover와 contain 속성이 있습니다.

cover 속성은 전체 사이즈 속성을 사이즈 크기에 맞게 조절하고 

이후 남는 부분은 큰쪽을 기준으로 위아래를 혹은 좌우를 조절해서

잘라냅니다.

반면 contain 속성은 사이즈크기를 백그라운드 맞게 조절하고

남는 부분은 repeat 속성으로 반복 시킵니다.

no-repeat 속성을 추가한다면 백그라운드 배경색이 보이게 되겠죠

background-position:50% 50% 속성을 더하면 이미지가

중앙에 배치 되게 됩니다. 

cover 속성

contain 속성

contain 속성 background-repeat:no-repeat;

contain 속성 background-position:50% 50%; background-repeat:no-repeat;

<이미지 출처: AOA설현의 청바지 브랜드 화보 -데일리안 뉴스에서>

개인적인 생각이지만 이미지를 정확히 조절이

어려운 경우에는 cover속성을 더하는 것이

좋지 않을까 생각되네요~

       위에 css 관련 소스입니다.

  #img4, #img5, #img6, #img7 {border:1px solid #BCE55C; width:250px;          

    height:250px;;  background:#F6FFCC; color:white;

    background-image:url("    

    https://t1.daumcdn.net/cfile/tistory/2264D4495897FE9D18"); }

 #img4{background-size:cover;}

 #img5{background-size:contain;}

 #img6{background-size:contain; background-repeat:no-repeat;}

 #img7{background-size:contain; background-position:50% 50%;  

          background-repeat:no-repeat;}

이외 원하는 위치에 배경이미지를 넣고 싶을때 사용하는 속성으로

background-position이 있습니다.

맨아래 사진이 background-position의 50% 50%를 주었으며

이는 수평(좌우) 50%, 수직(위아래) 50% 로 중앙 정렬의 효과가 있습니다.

background-position 은 이미지의 위치를 지정하며

x% y%식으로 비율에 따라 지정으로 하거나

background-position (좌우 , 상하)를 배치합니다.

수평 값으로는 left, center, right값이 들어가고

수직 값으로는 top, center, bottom값이 들어갑니다.