[css] 배경 모든 속성 설정 - background: 이미지 경로, 위치/크기, 반복, 색상 등

etc/html, css

이단서로 2020. 6. 26. 08:04

css의 background를 사용해서 이미지를 표현한다.

원하는 요소(element)에 위치 시킬수 있으니 편하게 사용할 수 있다.

개별적으로 사용할 수도 있으나, background를 사용하면 모든 속성을 설정할 수 있으니 편리하다.

모든 배경 속성을 설정할 수 있다. 색상, 이미지, 이미지 크기, 이미지 반복 등

순서는 원하는데로 정하면 된다.

사용예>

/* 이미지 반복 없음, 가운데 위치/크기 70%, 이미지 경로, 색상(회색) */

background: no-repeat center/70% url(/images/test.png) #EAEAEA;

개별설정>

이미지 경로 설정:

background-image: url(/images/test.png);

이미지 반복 설정:

background-repeat: no-repeat;

이미지 위치 설정:

background-position: center;

배경 색상 설정:

background-color: #EAEAEA;

출처>

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

background-image

background-repeat

background-position

background-color

광고>

728x90