#6. BackGround

1. background-image 프로퍼티

body{
    background-image: url("https://post-phinf.pstatic.net/MjAxNzExMThfMTU3/MDAxNTEwOTg1MjU0MDMw.UnE6KDZeDvuggh3tCZyAh1TnZdmvZQGLVZbT2nhBIAYg.9QvOIhmCZnSwa0BXJ8CVs3ROxovGtlVmRmglS2HE8esg.JPEG/20171118-006.jpg?type=w1200");
}

2. background-repeat 프로퍼티

배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다.

설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다.

이것은 background-repeat프로퍼티의 기본값이 repeat이기 때문이다.

 

x축으로만 이미지를 반복할 경우 repeat-x, y축으로만 이미지를 반복할 경우 repeat-y를 설정한다.

반복출력을 멈추고 싶은 경우, no-repeat를 설정하면 된다.

body{
    background-image: url("https://post-phinf.pstatic.net/MjAxNzExMThfMTU3/MDAxNTEwOTg1MjU0MDMw.UnE6KDZeDvuggh3tCZyAh1TnZdmvZQGLVZbT2nhBIAYg.9QvOIhmCZnSwa0BXJ8CVs3ROxovGtlVmRmglS2HE8esg.JPEG/20171118-006.jpg?type=w1200");
    background-repeat: repeat-x;
    background-color: yellow;
}

3. background-size 프로퍼티

배경 이미지의 사이즈를 지정한다. 프로퍼티값은 px, %, cover, contain등을 사용한다.

배경이미지의 width, height를 모두 설정할 수 있다. 하나의 값만 지정한 경우 지정한 값은 width를 의미하게 되며 height는 auto로 설정된다.

body{
    background-image: url("https://post-phinf.pstatic.net/MjAxNzExMThfMTU3/MDAxNTEwOTg1MjU0MDMw.UnE6KDZeDvuggh3tCZyAh1TnZdmvZQGLVZbT2nhBIAYg.9QvOIhmCZnSwa0BXJ8CVs3ROxovGtlVmRmglS2HE8esg.JPEG/20171118-006.jpg?type=w1200");
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
}

* cover로 지정할 경우 배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰 값에 배경 이미지를 맞춘다. 따라서 이미지의 일부가 보이지 않을 수 있다.

 

*contain으로 지정할 경우 배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경이미지가 보이지 않는 부분 없이 전체가 들어갈 수 있도록 이미지 스케일을 조정한다.

 

4. background-attachment 프로퍼티

일반적으로 화면을 스크롤하면 배경이미지도 함께 스크롤된다. 화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 background-attachment프로퍼티에 fixed 키워드를 지정한다.

body{
    background-image: url("https://post-phinf.pstatic.net/MjAxNzExMThfMTU3/MDAxNTEwOTg1MjU0MDMw.UnE6KDZeDvuggh3tCZyAh1TnZdmvZQGLVZbT2nhBIAYg.9QvOIhmCZnSwa0BXJ8CVs3ROxovGtlVmRmglS2HE8esg.JPEG/20171118-006.jpg?type=w1200");
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
    background-attachment: fixed;
}

5. background-position 프로퍼티

일반적으로 backgroud-image는 좌상단부터 이미지를 출력한다. 이때 background-position프로퍼티를 사용하면 이미지의 좌표(xpos, ypox)를 지정할 수 있다.

기본값은 background-position: 0% 0%로 우측 상단에 위치하게 된다.

 

6. background-color 프로퍼티

background-color프로퍼티는 요소의 배경색상을 지정한다. 색상값 또는 transparent키워드를 지정할 수 있다.

 

7. background Shorthand

background-color, image, repeat, positon을 한번에 정의하기위한  Shorthand Syntax이다.

ex) background: black url("#") no-repeat center;