04. background _ 배경 효과

background는 배경효과를 정의해주는 요소입니다.

배경의 색깔, 배경그림, 반복여부, 위치 등을 결정해 줍니다.
코드만 봐도 느낌이 오니 바로 예제를 봅시다.

background-color

배경의 색깔을 변경해 줍니다.

<div class="define_color">배경색을 입혀주세요</div>
 

CSS

<style>
   div.define_color {background-color:springgreen;}
</style>
 

배경색을 입혀주세요

background-image

배경에 이미지를 삽입해 줍니다.

<div class="define_color">배경이미지를 깝시다</div>
 

CSS

<style>
  div.define_images {width:200px;height:200px;color:#fff;background-image:url("http://cfs.tistory.com/custom/blog/189/1898934/skin/images/bg_big.png");}
</style>
 

배경이미지를 깝시다

배경이미지의 크기가 영역과 딱 맞는다면 좋겠지만 그렇지 않은 경우도 더러 있습니다.
그럴때 background-size를 사용합니다.
value값을 contain으로 주면, 가로세로 중 작은 값에 배경 크기를 맞춥니다. 어떤 크기에도 딱 맞게 담기지요.
가로나 세로 중 크기가 남을 경우에는 이미지를 반복하여 처리합니다.
반면 vlaue값을 cover로 주면 큰 값에 배경 이미지를 맞춰서 출력됩니다.
가로세로의 비율이 맞지 않는경우 이미지가 짤리게 되겠지요.
확인해 봅시다. (뒤에 float나 border,margin 등은 편리한 구분을 위해 넣은 것으로 뒤에서 다룹니다.)

<div class="define_contain"></div>
<div class="define_cover"></div>
 

CSS

<style>
   div.define_contain {width:100px;height:100px;background-image:url("http://cfs.tistory.com/custom/blog/189/1898934/skin/images/bg_size.png");background-size:contain;float:left;border:1px solid red;}
   div.define_cover {width:50px;height:100px;background-image:url("http://cfs.tistory.com/custom/blog/189/1898934/skin/images/bg_size.png");background-size:cover;float:left;border:1px solid red;margin-left:10px;}
</style>
 

background-repeat

배경이미지를 반복할 것인지 여부를 결정합니다.
value값을 repeat으로 주면 배경은 남는 여백을 전부 채울때까지 가로세로 모두 반복됩니다.
repeat-x는 가로만 반복, repeat-y는 세로로만 반복됩니다.
만약 value값을 no-repeat으로 주면 배경이미지는 단 한번 반복 후 더이상 출력되지 않습니다.
이 작은 이미지로 반복을 확인해 봅시다.

<div class="define_repeat first">가로세로 모두 다 반복</div>
<div class="define_repeat second">가로만 반복</div>
<div class="define_repeat third">세로만 반복</div>
<div class="define_repeat fourth">반복 없음</div>
 

CSS

<style>
   div.define_repeat {width:200px; height:100px;background-image:url("http://cfs.tistory.com/custom/blog/189/1898934/skin/images/bg_sm.png");float:left;border:1px solid red;margin-right:10px;}
   div.first {background-repeat:repeat;}
   div.second {background-repeat:repeat-x;}
   div.third {background-repeat:repeat-y;}
   div.fourth {background-repeat:no-repeat;}
</style>
 

가로세로 모두 다 반복

가로만 반복

세로만 반복

반복 없음

background-position & background-attachment

background-position은 배경의 위치를 결정해 주고 background-attachment는 배경을 고정시켜줍니다.
position에서 value값을 숫자로 표시 가능하고 top, bottom, left, right의 문자로도 표시 가능합니다.
attachment를 사용하면 스크롤이 길어지는 경우에도 배경은 고정된 값으로 항상 그 자리에 출력됩니다.
여기서는 background-position의 예제만 보고 넘어가겠습니다.

<div class="define_position"><br><br><br>오른쪽 상단에 위치하겠음</div>
 

CSS

<style>
   div.define_position {width:200px;height:200px;background-image:url("http://cfs.tistory.com/custom/blog/189/1898934/skin/images/logo2.png");background-repeat:no-repeat;background-position:right top;border:1px solid red;}
</style>
 

오른쪽 상단에 위치하겠음

shorthand property

background에 관한 내용들을 위에서 배운것 처럼 하나하나 따로 쓸 수도 있으나 한번에 표기하는 방법도 있습니다.
대부분 이 방법을 많이 사용하지요. 순서는 색깔, 이미지 url, 반복여부, 위치 순으로 입력하고 띄어쓰기로 구분합니다.
물론 value값이 필요 없는 경우에는 생략해도 됩니다.
한가지 value값이 쓰이는 경우에도 속성을 Full로 쓰지 않고 생략하며 background만 입력해 사용해도 좋습니다.
한마디로 background-color 대신 그냥 background라고만 쓰고 value값을 입력해도 결과는 같습니다.
코드를 봅시다.

<div class="define_short"></div>
 

CSS

<style>
   div.define_short {width:200px;height:200px;background:springgreen url("http://cfs.tistory.com/custom/blog/189/1898934/skin/images/logo2.png") no-repeat right top;border:1px solid red;}
</style>
 

* 개인적인 공부를 정리하는 블로그입니다.