배경 속성

background

background 속성을 이용하여 배경에 대한 디자인 처리가 가능하다. 사용 가능한 세부 속성은 다음과 같다.

• background : 배경에 대한 통합 설정

• background-attachment : 배경의 부착 상태 설정

• background-blend-mode : 이미지 혼합 처리에 대한 설정

• background-clip : 배경 표시 범위 설정

• background-color : 배경색 설정

• background-image : 배경 이미지 설정

• background-origin : 배경 이미지의 시작 영역 설정

• background-position : 배경 이미지의 위치 설정

• background-repeat : 배경 이미지의 반복 설정

• background-size : 배경 이미지의 크기 설정

background-color

background-color는 배경색을 설정하기 위한 속성이다.

색상(color)

background-image

background-image 속성을 이용하여 배경 이미지를 설정할 수 있다.

설정을 위한 함수(명령)들은 다음과 같다.

• image() : 이미지 설정 함수

• url() : 경로 설정 함수

• linear-gradient() : 선형 그라디언트 함수

• radial-gradient() : 원형 그라디언트 함수

• repeat-linear-gradient() : 선형 반복 그라디언트 함수

• repeat-radial-gradient() : 원형 반복 그라디언트 함수

url()

background-repeat

background-repeat 속성을 이용하여 배경의 반복 여부를 설정할 수 있다.

• background-repeat:repeat; - 반복을 허용한다.

• background-repeat:repeat-x; - x축으로의 반복만 허용한다.

• background-repeat:repeat-y; - y축으로의 반복만 허용한다.

• background-repeat:no-repeat; - 반복을 허용하지 않고 이미지를 한 번만 출력한다.

• background-repeat:space; - 처음과 마지막은 양쪽 끝에 고정하고 남은 영역에 고르게 반복한다.

• background-repeat:round; - 여백을 남기지 않고 반복한다.

background-position

background-position 속성을 설정하여 배경의 시작 위치를 설정할 수 있다.

background-position에 속성에 사용할 수 있는 값은 다음과 같다.

• 키워드

  • top

  • left

  • center

  • bottom

  • right

• 절대적인 크기

  • 50px

• 상대적인 크기

  • 1em

  • 1rem

  • 50%

• 조합

  • top 50px

  • top 50px left 20px

  • bottom 0% right 15px

• 기타

  • inherit

  • initial

  • revert

  • unset

배경이 있는 입력창 예제

다음 속성을 활용하여 배경이 있는 입력창을 구현한 예제이다.

• background-image

• background-repeat

• background-position

• background-size

linear-gradient()

CSS3부터는 linear-gradient 함수를 사용할 수 있다. 브라우저마다 지원이 가능한 경우와 불가능한 경우로 나눠지므로 사용 시 이를 확인할 필요가 있다.

CSS Gradients | Can I use... Support tables for HTML5, CSS3, etccaniuse.com

자동으로 생성하는 사이트들이 많이 있기 때문에 참고하면 원하는 그라디언트를 손쉽게 생성할 수 있다.

CSS Gradient – Generator, Maker, and BackgroundCSS Gradient