[CSS] background 속성

 

background-repeat (배경이미지를 어떻게 반복시킬지 정한다)

repeat - 가로세로로 반복

repext-x / y - x축 또는 y축으로 반복

no-repeat - 반복하지 않음

 

div{
background:url("../img/page_btn_pc.png") 80% center repeat-x; 
width:500px; 
height:150px; 
border:1px solid red;
}

repext-x 했을 때 결과값입니다.

div{
background:url("../img/page_btn_pc.png") 80% center repeat-y; 
width:500px; 
height:150px; 
border:1px solid red;
}

repext-y 했을 때 결과값입니다.

 

background-position(배경 이미지의 위치를 정한다. 단위는 px또는 % 사용.)

left, center, right / top, center, bottom -> 기본값은 left top입니다.

 

div{
background:url("../img/page_btn_pc.png") 80% center no-repeat; 
width:500px; 
height:150px;
border:1px solid red;
}

위치를 왼쪽에서 80% 수직 가운데 center를 설정해준 결과값 입니다.

(no-repeat 대신 repeat-x를 주면 가로로 반복, repeat-y는 세로로 반복됩니다.) 

 

background-attachment(배경 이미지를 고정시킬지 스크롤 되게 할지 정한다.)

scroll - 기본값

fixed -  배경이 고정되어 있음

 

div 3개를 만들고 css는 아래 코드블럭을 참고해주세요.

div:nth-child(1){
	height:600px; background:pink; 
}
div:nth-child(2){
	height:400px; 
    background:url("../img/about_under_pc.jpg") center top repeat-y; 
    background-attachment: fixed; 
    }
div:nth-child(3){
	height:600px; 
    background:green; 
    }

 

결과값 (gif파일이여서 정신없을까봐 접어놨어요)↓

2번째 div가 background 사진을 넣고 사진이 세로 값이 짧아서

repeat-y로 y축 반복되게 하고 fixed로 배경을 고정시켰습니다.

background:url("../img/about_under_pc.jpg") center top repeat-y fixed; -> 한줄로 표기할 수 있습니다.

 

 

background-size (배경이미지의 크기를 조정하는 속성)

div 2개 (.contain .cover)를 만들고 css를 아래와 코드블럭과 같이 설정했습니다.

div{
	background:url("../img/about_visual01_pc.jpg") center top no-repeat;
    width:500px; 
    height:300px; 
    border:1px solid red; 
    margin-bottom:20px; 
    display:inline-block;
 }
.contain{
	background-size:contain; 
}
.cover{
	background-size:cover;
}

contain - 가로세로가 div에 적당한 크기로 채울 수 있도록 이미지를 조절합니다.

cover - div 요소의 가로세로를 가득 채울 수 있게 이미지를 비율에 맞게 최대한 확대,축소 합니다

(일부분이 잘릴 수도 있음)

 

 

background-origin (배경이미지의 영역을 설정해주는 옵션입니다)

<div class="o1">안녕하세요~ on sunday의 tistory입니다. background-origin:border-box</div>
<div class="o2">안녕하세요~ on sunday의 tistory입니다. background-origin:padding-box</div>
<div class="o3">안녕하세요~ on sunday의 tistory입니다. background-origin:content-box</div>

div{
  background:url("../img/about_visual01_pc.jpg") center top no-repeat; 
  width:300px; 
  padding:20px; 
  border:3px dashed gray;  
  display:inline-block; 
  margin-left:10px;
}

.o1{background-origin:border-box} /*div의 테두리영영까지 img가 적용됩니다.*/
.o2{background-origin:padding-box} /*div의 테두리는 제외한 영역부터 img가 적용됩니다.(테두리 제외)*/
.o3{background-origin:content-box} /*여백을 제외한 내용부터 img가 적용됩니다.*/

결과 화면입니다.

첫번째 div는 background-origin:border-box -  div의 테두리영역까지 img가 적용됩니다.

두번째 div는 background-origin:padding-box -  div의 테두리를 제외한 영역부터 img가 적용됩니다.(테두리 제외)
세번쨰 div는 background-origin:content-box - 여백을 제외한 내용부터 img가 적용됩니다.

 

+)

비슷한 속성으로는 background-clip이 있습니다.

background-origin이 배경이미지 속성이였다면, background-clip은 배경색의 영역 설정 속성옵션입니다.

background-clip:border-box  /  background-clip:padding-box  /  background-clip:content-box 

 

+)

multi-background - 배경이미지를 여러개 설정할 수 있는 속성입니다.

아래 코드블럭과 같이 css속성을 설정할 수 있습니다.

background-image: url("첫번째 이미지")url("두번째 이미지"),url("세번째이미지");
background-repeat: no-repeat,repeat-x,repeat-y;
background-position: top,center,bottom;
backgrond-attachment: fixed,fixed,fixed;

순서대로 첫번째 배경이미지, 두번째 배경이미지, 세번째 배경이미지가 설정됩니다.