CSS 배경 Background

background properties

  background-color

  background-image

  background-repeat

  background-attachment

  background-position

배경색

body {
    background-color: lightblue;
}

배경 이미지

요소의 배경으로써 이미지를 특정한다. 기본적으로 이미지는 반복되며, 전체 요소를 덮는다.

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

배경 이미지 - 수평적 또는 수직적 반복

background-image 속성은 이미지가 수직, 수평적으로 반복된다. 어떤 이미지들은 오직 수직 또는 수평적으로만 반복되어야 한다.

background-repeat:repeat-x는 x축으로 반복, repeat-y는 y축으로 반복

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

한번만 보여주려면 background-repeat:no-repeat;

이미지를 특정 위치 위치시키려면

background-position:right top;

background-repeat:no-repeat;

스크롤과 함께 이미지를 움직이려면

background-attachment:fixed;

background-position:right top;

background-repeat:no-repeat;

배경 shorthand 속성

모든 배경 속성을 하나의 속성에 지정하는 것이다.

색 이미지 반복 attachment 위치

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

https://www.w3schools.com/css/css_background.asp