background 관련 속성

background-clip

• text : 백그라운드 이미지를 텍스트에만
• border-box : border까지
• padding-box : padding까지
• context-box : content내에서

 

background-position: 배경화면 위치

background-position: left 20px;  /* 0% 20px; */
background-position: 50% 50%;  /* center; */
background-position: bottom 50px right 100px; /*아래로부터 50px, 오른쪽으로부터 100px*/
background-position: 100px 50px; /* 왼쪽으로부터 100px, 위로부터 50px */

 

background-size

/* Keyword values */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* 이미지 가로길이 */
background-size: 50%;
background-size: 3.2em;
background-size: auto;

/* Two-value syntax */
/* 이미지 가로길이 , 세로길이 */
background-size: 50% auto;
background-size: auto 6px;

 

background 속성 축약

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size : 100%;
}

body {
  background: #ffffff url("img_tree.png") no-repeat right top / 100%;
}

color url repeat position / size

 

 

See the Pen Untitled by JEONG (@cona) on CodePen.