#참조: https://www.w3schools.com/css/css3_backgrounds.asp
[ Syntax ]
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
1) background-color (배경색)
2) background-image (이미지)
3) background-repeat (이미지 반복여부)
4) background-attachment (이미지-스크롤여부)
5) background-position (배치위치 좌우상하 중앙등)
1) background-color
2) background-image
3) background-position / background-size
4) background-repeat
5) background-attachment
※ 2개이상 연속 사용시 컴마(,)로 나열
background: url(iu.png) right bottom no-repeat, url(bg.png) left top repeat;
background: gray url("/res/images/iu.jpg") center center no-repeat content-box content-box scroll;
| url("img.gif,png,jpg") | |
| conic-gradient(color,color,...) | 2color 이상, 1/4 우상으로 부터 시계방향으로 gradient (파이 그래프 가능) |
| linear-gradient(color,color,...) | 2color 이상, 위에서 아래로 gradient (직선) |
| radial-gradient(color,color,...) | 2color 이상, 중앙에서 밖으로 원을 그리면서 gradient (물결모양) |
| repeating-conic-gradient(color [%|deg deg],..) | 2color 이상, border-radius:50% 인경우 파이를 만든다.(지정한 값으로 반복한다.) |
| repeating-linear-gradient([deg],color %, ...) | 위에서 아래로 반복, 앞에 deg를 주면 방향을 바꿀수 있다. 90deg면 좌에서 우로 |
| repeating-radial-gradient(...) |
normal : default
multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity
| scroll | default, page와 함께 스크롤 |
| fixed | 이미지가 스크롤되지 않고 멈춰 있다. |
| local | 요소의 내용과 함께 스크롤 |
left top, left center, left bottom : 왼쪽 상중하
right top, right center, right bottom : 오른쪽 상중하
center top, center center, center bottom : 가운데 상중하
1) center
2) [left|right|center] [top|bottom|center]
3) x% y% : x축 비율, y축 비율
4) x-pos y-pos : 크기를 지정한다.
| repeat | (default) 이미지 원본을 폭/높이를 반복한다. 남으면 잘라진다. |
| no-repeat | 반복없이 이미지 원본을 그대로 보여준다. 컨테이너가 남으면 공백, 모자라면 잘린다. |
| repeat-x | x축으로만 반복 |
| repeat-y | y축으로만 반복 |
| round | 전체 이미지의 폭/높이에 근사비율로 들어갈수 있도록 이미지를 조절해 반복한다. 화면에 꽉차게 넣는다. |
| space | 원본이미지 변형없이 반복한다. 원본이 들어가지 못하는 부분은 공백으로 채운다. 위아래, 좌우에 배치하고 원본기준 |
이미지 변형 되는것 : round는 컨테이너에 맞게 이미지가 변형된다.
| 100px | 폭(100px)에 세로는 자동 |
| 100px 100px | width=100px, height=200px |
| percentage(%) | 컨테이너의 비율에 맞춘다.(100% 100%면 화면 꽉차게 늘린다.) |
| cover | 컨테이너를 다 덮도록 이미지 폭이나 높이를 컨테이너에 맞춘다.(이미지 폭/높이는 원본비율에 맞추고 남는부분을 잘라낸다.) 이미지가 화면전체 커버되도록 x,y중 하나만 화면에 맞게 맞춘다. |
| contain | 컨테이너 안에 이미지가 잘리지 않고 들어가도록 폭이나 높이중 하나에 맞추어 배치 이미지전체가 보이도록 x,y중 하나만 화면에 맞게 맞춘다. 컨테이너와 이미지사이즈가 동일하지 않을경우, X 또는 Y 축에 여백이 생긴다. |
| padding-box | default (패딩을 포함한 시작점) |
| border-box | 테두리를 포함한 시작점 (테두리가 굵으면 이미지가 가려진다.) |
| content-box | 내용의 시작점 (테두리, padding를 제외한부분에 이미지가 들어간다) |
| border-box | default(테두리까지를 포함한 배경을 덮음)-테두리에 배경이 가려짐 |
| padding-box | 테두리를 제외한(padding까지 포함) 배경을 덮음 |
| content-box | padding까지 제외한(content만 포함) 배경을 덮음 |