background 속성 - css 배우기

background 속성 - css 배우기

background

배경 이미지를 지정한다.

background: url('https://www.w3schools.com/css/img_fjords.jpg');

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

background-color

배경 색상을 지정한다.

background-color: red;

background-image

배경 이미지를 지정한다.

background-image: url('https://www.w3schools.com/css/img_fjords.jpg');

background-repeat

배경 이미지 반복을 지정한다.

background-repeat: repeat-x; /* 가로 반복 */
background-repeat: repeat-y; /* 세로 반복 */
background-repeat: no-repeat; /* 반복 없음 */

background-position

배경 이미지 위치를 지정한다.

background-position: left top; /* 왼쪽 위 */
background-position: 0 100%; /* 왼쪽 아래 */
background-position: 50% 50%; /* 가운데 */

background-attachment

배경 이미지 스크롤 여부를 지정한다.

background-attachment: scroll; /* 스크롤 */
background-attachment: fixed; /* 고정 */

background-size

배경 이미지 크기를 지정한다.

background-size: auto; /* 원본 크기 */
background-size: cover; /* 화면에 꽉 차게 */
background-size: contain; /* 화면에 맞게 */
background-size: 100px 100px; /* 가로 100px, 세로 100px */

background

background 관련 속성을 한번에 지정한다.

background: background-color background-image background-repeat background-position background-attachment
    background-size;

background: red url('https://www.w3schools.com/css/img_fjords.jpg') repeat-x left top scroll auto;

sprite image

여러 이미지를 하나의 이미지로 합쳐서 사용하는 기법

background: url('https://www.w3schools.com/css/img_navsprites.gif') 0 0;
background: url('https://pm.pstatic.net/resources/asset/sp_main.d5b6c236.png') 0 0;