background 단축 표현 + linear-gradient()

background: url() / color / repeat / position(x, y) / size(width, height)

반드시 부모또는 자신에게 width, hight가 있어야 한다.

ex) background: url(../경로) no-repeat center top / 100%

 

background-size: contain

이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절합니다.

단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않습니다.

따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있습니다.

background-size: cover

이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절합니다.

따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있습니다.

 

background: linear-gradient()

https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient

http://tcpschool.com/css/css3_module_linearGradients

linear-gradient(red, orange, yellow, green, blue);

linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

[한 요소의 배경색을 단색으로 여러개 표현하는 방법]

linear-gradient(to bottom, red, red 30px, blue 30px, blue 230px, green 230px, green);

시작색, 시작색 + 끝지점 / 시작색 + 시작지점, 시작색 + 끝지점 / 시작색 + 시작지점, 시작색 + 끝지점

px / %로 사용 가능하다.

 

background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);

background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple);

 

background-attachment: fix; 배경이미지가 브라우저 화면에 고정되어 있음!