배경속성

웹 문서를 꾸미기 위해 배경 이미지나 여러 속성들을 적용할 수 있다.

[기본형]
1.background-color
    :배경에 색상을 지정함. 색상명이나 #hex, rgb, rgba와 같은 속성값을 사용.
2.background-image
    :배경이미지를 넣을 수 있다. url()속성값을 사용 ()사이에 이미지의 경로가 들어감. 
3.background-repeat
    :배경의 반복 여부를 지정. 배경속성은 바둑판 배열로 반복되는 것이 기본값.
        [속성값]
        -no-repeat:반복하지 않음. 불러온 배경이미지를 한 번만 보여줌.
        -repeat-x:배경 이미지를 가로로 반복한다.
        -repeat-y:배경 이미지를 세로로 반복한다.
4.background-attachment
    :배경을 스크롤에 따라 고정할지 아니면 같이 스크롤할지 정함. 
        [속성값]
        -fixed:스크롤을 따라 움직이지 않고, 제자리에 고정
        -scroll:기본값으로 스크롤이 움직이면 배경이 위로 올라감. 
5.background-posittion
    :배경의 위치를 지정함. 
        [속성값]
        -px/%
        -left: 영역의 왼쪽으로 정렬
        -center: 배경을 가로나 세로로 정렬
        -cover: 배경 이미지를 가로 영역에 맞춰 채움
        -contain:배경 이미지를 세로 영역에 맞춰 채움
        -right:영역의 오른쪽으로 정렬
        -top: 영역의 위로 정렬
        -bottom: 영역의 아래로 정렬
6.background-size
    :배경의 크기를 지정합니다. 

응용)

background-repeat: no-repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

background-position: 100px 50px; 적용
반복을 하지 않고, =background-repeat: no-repeat;

(이동기준은 모서리에서 모서리가 기준이다.)

background-position: left center;

background-position: center center;

background-attachment:scroll ;

스크롤에 따라서 고정이 됨.

background-attachment: fixed;
배경은 움직이고, 스크롤을 만지면 영역만 바뀜

background-size: contain;
정비율로 늘 채움
세로의 양옆의 여백이 생김

background-size: cover;
(이미지의 가로가 기준=가로를 기준으로 정비율)
영역의 가로 사이즈에 맞춰서 이미지를 정비율로 100% 채움.

= 동일한 커버값을 가짐.

+
뒤에 숫자를 넣으면 세로값이 조절이 됨.
근데 찌그러지니까 웬만하면 정비율로 100%만 유지해줘야함.

cover와 100%의 차이점
%이미지가 같이 조절이 됨.
그래서 이미지가 줄어들거나 늘어나면 그 사이즈를 %로 챙기 위에 사용함.
동그라미 친 공간이 적용 될 박스 안에서의 위치를 나타냄

그리고!!!!!!!!!

background-size: cover;를 사용하게 되면
영역을 전체로 채우기 때문에 사이즈 때문에 빈칸이 생길 일이 없음 !! 가로를 기준으로 이미지가 잘리더라도 영역을 모두 채우겠다는 뜻

만약!

이미지를 두개로 갖고올때는 ,로 구분해서 해준다

(앞으로 있는 애가 더 앞쪽으로 나온다)

한꺼번에 선언하기

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