[CSS] 배경(Backgrounds) 속성

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

배경(Backgrounds) 속성은 웹사이트 전체나 요소의 배경을 설정할 수 있는 속성이다.

그냥 흰 배경을 그대로 두면 깔끔하긴 하지만 가끔 심심하기도 하다.

 

이럴 때 배경 이미지를 넣어서 예쁘게 꾸며 볼 수 있다.

배경과 관련된 속성을 알아보자.

 

여기서 헷갈릴 수 있는 점은 배경 속성이라고 해서 무조건 웹사이트 전체에 들어가는 것은 아니다.

꼭 웹사이트가 아니더라도, 태그나 태그 등 다양한 태그에서도 사용할 수 있다.

 

body태그에 background속성을 적용하면 웹페이지 전체에 배경이 적용되고,

span태그를 이용해서 특정 텍스트에만 배경을 적용할 수도 있다.

1. background-color

배경의 색상을 지정할 수 있다. 속성값으로는 컬러명, HEX, RGB등을 사용할 수 있다.

body {
  background-color: lightblue;
}

 

opacity 속성을 사용하면 투명도를 조절할 수 있다.

1이 가장 불투명한 값, 0이 가장 투명한 값이다.

div {
  background-color: green;
  opacity: 0.3;
}

 

❗주의❗ 이 때, opacity를 적용하면 배경 뿐 아니라 안의 내용까지 모두 투명도가 적용된다.

 

이 때문에, background-color를 투명하게 하고 싶다면

RGB값에 투명도를 의미하는 Alpha값을 추가한 RGBA값을 사용한다.

div {
  background-color: rgba(0, 128, 0, 0.3);
}

 

2. background-image

배경에 이미지를 넣는다. 속성값은 url값이다.

body {
  background-image: url("paper.gif");
}

 

또한 url을 콤마(,)로 이어서 여러개 작성하면 배경 이미지를 여러개 삽입할 수도 있다.

body {
  background-image: url("paper1.gif"), url("paper2.gif");
}

 

3. background-size

배경의 크기를 지정할 수 있다.

다른 size 속성들 처럼 px, em, %등 다양한 값을 사용할 수 있다.

 

4. background-repeat

배경 이미지의 반복을 설정할 수 있다.

속성 값으로, repeat, repeat-x, repeat-y, no-repeat, space 등을 가질 수 있다.

 

대부분 속성 값을 읽으면 어떤 것인지 눈치를 챌 수 있다.

참고로 space는 이미지가 반복되지만 이미지 사이에 공백이 생기는 것이다.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

 

5. background-attachment

배경 이미지를 화면에 고정하는 속성이다.

속성값으로 fixed, inherit, initial, local, scroll(기본값)이 있다.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

 

fixed는 화면을 스크롤 해도 고정된 위치에 남아있는다.

scroll은 화면 스크롤에 따라 배경 이미지가 함께 이동한다.

local은 배경 이미지가 요소의 스크롤에 따라 이동하는 것이다.

 

6. background-position

배경 이미지의 위치를 나타내는 속성이다.

속성값으로 bottom, center, left, right, top, inherit, initial 또는 x,y좌표를 px, em, %등으로 나타낸 값을 사용할 수 있다.

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50px 150px;
}