[html/css] 배경 속성(Background)

배경 속성
Background

 

 

웹 문서를 꾸미기 위해 이미지나 여러 속성들을 적용하는 속성이다.

1. background-color
배경에 색상을 지정한다. (색상명, #hex, rgb, rgba... 등)

background-color : #fff;

---

2. background-image
배경에 이미지를 넣을 수 있다. url(이미지경로)속성을 사용한다.
여러 이미지를 넣을 경우 컴마(,)로 구분하여 불러오고 앞(좌측)에 있는 이미지가 가장 앞으로 나온다.

background-image: url(이미지주소), url(이미지주소);

---

3.background-repeat
배경을 반복할 것인지 여부를 지정한다. 기본값은 바둑판 배열로 되어있다.

[속성값]
    ① no-repeat : 반복X, 불러온 이미지를 1번만 보여준다.
    ② repeat-x : 배경이미지를 가로로 반복한다.
    ③ repeat-y : 배경이미지를 세로로 반복한다

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

---

4.background-attachment
배경을 스크롤에 따라 고정할지 같이 스크롤될지 정한다.

[속성값]
    ① fixed : 배경이 스크롤에 영향받지 않고 제자리에 고정된다.
    ② scroll : 기본값. 스크롤에 따라 배경도 위로 올라간다.

background-attachment: fixed;
background-attachment: scroll;

---

5. background-position
배경의 위치를 지정한다. 가로값 세로값 두개를 지정해야 한다. 만약 한개만 적을 경우, 가로값만 적용된다.

[속성값]
    ① px - 위치를 좌표로 지정한다. ex) 선택자{background-position: 100px 50px;}
    ② Left - 영역의 좌측으로 정렬한다.
    ③ right - 영역의 우측으로 정렬한다.
    ④ center - 영역의 가로 중앙이나, 세로 중앙에 정렬된다.
    ⑤ top - 영역의 상단으로 정렬된다.
    ⑥ bottom - 영역의 아래로 정렬된다.

background-position: 숫자px 숫자px;
background-position: Left top;
background-position: left bottom;
background-position: right top;
background-position: right bottom;
background-position: center center;
등..

---

6. background-size
배경의 크기를 지정한다.

[속성값]
    ① px, % 등 사이즈를 지정한다. %의 경우 영역의 가로 사이즈를 기준으로 한다.
    ② cover - 배경 이미지를 가로 영역에 맞춰 채운다.
    ③ contain - 배경 이미지를 세로 영역에 맞춰 채운다.

background-size: 숫자px;
background-size: 숫자%;
background-size: cover;
background-size: contain;

---

7. backgoround
   [기본값]
    ① background : url(주소) 반복여부 가로위치 세로위치 사이즈
    ② background : url(주소) 반복여부 가로위치 세로위치 컬러/사이즈

background : url(주소) 반복여부 가로위치 세로위치 사이즈;
background : url(주소) 반복여부 가로위치 세로위치 컬러/사이즈;