[CSS] background 속성

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-blend-mode

 

background-blend-mode : 2개 이상의 배경 이미지를 합성시키는 방법 설정

normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity

https://www.w3schools.com/cssref/pr_background-blend-mode.asp

CSS background-blend-mode property

 

background-attachment : 이미지가 위치하는 방법 설정

scroll, fixed, local, initial, inherit

https://www.w3schools.com/cssref/pr_background-attachment.asp

CSS background-attachment property

 

background-clip : 배경 테두리가 그려지는 위치에 대한 설정

border-box, padding-box, content-box, initial, inherit

https://www.w3schools.com/cssref/css3_pr_background-clip.asp

CSS background-clip

 

background-image : 배경이미지 또는 그레디언트 설정

url(), none, conic-gradient(), linear-gradient(), radial-gradient(), repeating-conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), initial, inherit

conic, linear, radial 은 색상 그레디언트를 설정하는 세팅이다.

https://www.w3schools.com/cssref/pr_background-image.asp

CSS background-image property

 

background-origin : 배경이미지 위치 기준에 대한 설정

padding-box, border-box, content-box, initial, inherit

https://www.w3schools.com/cssref/css3_pr_background-origin.asp

CSS background-origin property

 

background-position : 배경이미지 위치설정

left top, left center, left bottom, right top, right center, right bottom, center top, center cetner, center bottom, x% y%, xpos ypos, initial, inherit 

https://www.w3schools.com/cssref/pr_background-position.asp 

CSS background-position property

 

background-repeat : 이미지 반복에 대한 설정

repeat, repeat-x, repeat-y, no-repeat, space, round, initial, inherit

 

space : 양쪽으로 짤리지 않게 배치하면서 최대한 공백을 줄이는 방법으로 이미지 배치

round : 공백없이 최대한 반복되도록 찌그러지거나 늘어나게 배치함.

 

https://www.w3schools.com/cssref/pr_background-repeat.asp

CSS background-repeat property

 

background-size : 이미지 크기 설정

auto, length, percentage, cover, contain, initial, inherit

https://www.w3schools.com/cssref/css3_pr_background-size.asp

CSS background-size property