CSS background

1
2
3
4
5
6

background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)

background-color

컬러는 다음 3가지 값만 가능하다.

1. 유효한 컬러이름 ex) ‘red’, ‘green’ …
2. HEX 값 ex) ‘#ff0000’
3. RGB 값 ex) ‘rgb(255,0,0)’

1
2
3
4
5
6
7
8

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

div {
  background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */
}

opacity 속성을 줘서 배경을 흐리게 할 수 있다.

❗️opacity 속성을 사용하게 될 경우 자식 요소까지 흐려지므로 가독성이 떨어질 수도 있다.

background-image

기본값으로 image는 반복되어서 전체 요소를 덮어준다.

신기한 것은 p 태그에도 해당 속성을 설정할 수 있다는 점이다.

1
2
3

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

repeat, position 속성

image를 가로, 세로 반복되게 설정하는 속성이다.

position은 요소내에서 image의 위치를 설정한다.

1
2
3
4
5

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

해당 배경 이미지를 아래에 위치시킨다.

background-attachment

1
2
3
4
5
6

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

fixed로 설정하면 position fixed 처럼 배경이미지가 스크롤 하여도 해당 위치에 고정되어 있다.

scroll로 설정하면 다른 페이지를 보려고 스크롤 할 때, 배경도 스크롤된다.

단축표현

1
2
3

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

한줄로 쓸 수 있는데, 순서는 다음과 같다.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

댓글 공유