배경(background)

background

- 특정 요소에 원하는 배경 색상이나 이미지를 지정하는 것

- 이미지만 삽입하거나, 색상만 삽입하거나, 두가지를 동시에 사용할 수 있다.

    <style>

      div {

        border: 5px solid gray;

        background-color: tomato;

        background-image: url(./img/리리.png);

        /* color와 image를 동시에 사용할 수 있다. */

        /* 투명값을 가지고 있는 이미지를 사용 */

        /* 단, 이미지가 너무 크면 배경 색상은 가려진다. */

    </style>

 

- 배경 이미지를 반복하거나 반복하지 않을 수 있다.

<style>

      div {

        border: 5px solid gray;

        background-repeat: no-repeat;

        /* 배경 반복 X, 이외에도 repeat-x, repaet-y 등이 있다. */

      }

    </style>

 

- 배경을 고정 시키거나, 스크롤시 화면에서 사라지게 만들 수 있다.

 

 <style>

      div {

        border: 5px solid gray;

        background-attachment: fixed;

        /* 이미지 위치 고정, 기본값은 scroll */

      }

    </style>

 

- 특정 위치에 배경화면을 위치시킬 수 있다.

<style>

      div {

        border: 5px solid gray;

        background-position: bottom;

        /* 배경 위치 조정 */

      }

    </style>

 

- 화면 전체를 배경 색상, 이미지로 덮을 수 있다.

<style>

      div {

        border: 5px solid gray;

        background-size: cover;

        /* contain - 화면의 크기에 모든 이미지가 다 들어갈 수 있도록한다. */

        /* cover - 화면 전체를 이미지가 사용, 바깥쪽으로 나오는 부분이 생김(손실 발생) */

      }

    </style>

 

- border 속성을 이용하여 위의 속성을 한번에 정의내릴 수 있다.

<style>

      div {

        border: 5px solid gray;

        /* 축약형(shorthand)- background: tomato url() no-repeat fixed center; */

      }

    </style>