Background colors

background-color 프로퍼티를 이용하며 값으로는 <color> 값이 사용된다.
배경은 content와 padding 영역을 합한 범위이다.

.box {
  background-color: #567895; // 16진수 색상
}

h2 {
  background-color: black; // 키워드 색상
}
span {
  background-color: rgba(255,255,255,.5); // rgba색상
}
   

Background images

background-image 프로퍼티를 이용하며 값으로는 url(path) 값이 사용된다.
배경이 적용된 엘리먼트보다 이미지의 사이즈가 크면 이미지의 일부만 잘려 보이고
반대로 엘리먼트보다 이미지의 사이즈가 작으면 수직 수평방향으로 반복되어 출력된다.

.a {
  background-image: url(balloons.jpg);
  background-color: black;
}

.b {
  background-image: url(star.png);
}

Controlling background-repeat

반복을 제거하기 위해 background-repeat 프로퍼티를 이용한다.
사용가능한 값으로는 다음과 같다.

• no-repeat

• repeat-x

• repeat-y

• repeat

Sizing the background image

배경 사이즈를 제어하기 위해 background-size 프로퍼티를 이용한다.
사용가능한 값으로 length 또는 percentage 를 사용할 수 있지만,
키워드 값인 cover 와 contain 을 사용하면 더욱 간편하게 이미지가 엘리먼트 크기에 맞춰진다.

• cover
  

• contain
  

만약 이미지와 색상을 동시에 적용하면 색상위로 이미지가 덮어진다.
이미지를 로드하지 못할 때 유용하게 사용될 수 있다.

Positioning the background image

background-position 프로퍼티를 사용하여 요소 내에 배경의 위치를 지정할 수 있다.
배경이미지의 왼쪽 위 모서리를 기준으로 엘리먼트의 좌표에 따라 위치시킬 수 있다.
사용 가능한 값으로는 length 와 percentage 를 이용한다.
기본값은 (0, 0) 이기 때문에 별 다른 설정을 하지 않으면 이미지의 왼쪽 위 모서리가 엘리먼트의 (0, 0) 으로 매칭된다.

(0, 0)은 엘리먼트의 왼쪽 위 모서리를 뜻한다.

또한 top bottom left right center와 같은 키워드 값을 이용할 수도 있다.
다만, 키워드 값 또는 percentage 값을 사용할 때는 중심 기준이 왼쪽 위 모서리가 아니라 직관적으로 바뀐다.
예를 들어, top(또는 0%)이면 이미지의 윗 변이 엘리먼트의 윗 변에 붙고 bottom(100%)이면 이미지의 아래 변이 엘리먼트의 아래 변에 붙고 center(50%)이면 엘리먼트의 정 중앙에 놓인다.

키워드 값과 length 또는 percentage 값을 섞어서 사용하면 엘리먼트의 특정 모서리로부터 거리를 나타낼 수 있다.

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 10px right 50%; // 위에서 10px거리, 오른쪽에서 50% 거리
}

Gradient backgrounds

이미지와 같은 역할을 하며 background-image 프로퍼티를 사용하여 설정한다.
사용 가능한 값으로는 <gradient> 타입을 사용하며 이는 gradient 생성기를 사용해서 생성하면 쉽게 만들 수 있다.
gradient 생성기
또 다른 생성기

Multiple background images

배경 이미지를 여러개 설정하면 겹쳐보이게 된다.
background-image: 첫 번째 이미지, 두 번째 이미지;
첫 번째 이미지가 사용자와 제일 가깝고 두번째 이미지가 첫 번째 이미지 밑으로 들어가는 식으로 스택이 쌓인다.

참고: 그라데이션은 일반 배경 이미지와 함께 사용할 수 있다.

각각의 이미지에 따로 속성을 부여하고 싶다면 , 를 이용하면 순서대로 대입이 된다.

background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right;

만약 속성의 개수가 서로 다를 땐 적은 수의 속성 값이 다시 처음부터 순환한다.

Background attachment

background-attachment 프로퍼티를 이용해서 스크롤시 배경을 제어할 수 있다.
사용 가능한 값으로는 scroll , fixed , local 가 있다.

데모 동작 사이트를 살펴보자.
배경이미지 스크롤 데모 사이트

Accessibility considerations with backgrounds

• 배경과 텍스트의 색상이 잘 구분되어야 한다.

• 이미지 위에 텍스트가 위치해 있을 경우, 이미지가 로드되지 않을 경우를 대비해 배경색도 지정해야 한다.

• 스크린 리더는 배경 이미지를 구문 분석할 수 없으므로 의미 없는 이미지만을 배경 이미지로 사용해야 한다.
  의미가 있는 이미지는 <img>를 이용한다.

[참고] : MDN