배경 속성
Last updated
Last updated
background 속성을 이용하여 배경에 대한 디자인 처리가 가능하다.
사용 가능한 세부 속성은 다음과 같다.
background : 배경에 대한 통합 설정
background-attachment : 배경의 부착 상태 설정
background-blend-mode : 이미지 혼합 처리에 대한 설정
background-clip : 배경 표시 범위 설정
background-color : 배경색 설정
background-image : 배경 이미지 설정
background-origin : 배경 이미지의 시작 영역 설정
background-position : 배경 이미지의 위치 설정
background-repeat : 배경 이미지의 반복 설정
background-size : 배경 이미지의 크기 설정
background-color는 배경색을 설정하기 위한 속성이다.
background-image 속성을 이용하여 배경 이미지를 설정할 수 있다.
설정을 위한 함수(명령)들은 다음과 같다.
image() : 이미지 설정 함수
url() : 경로 설정 함수
linear-gradient() : 선형 그라디언트 함수
radial-gradient() : 원형 그라디언트 함수
repeat-linear-gradient() : 선형 반복 그라디언트 함수
repeat-radial-gradient() : 원형 반복 그라디언트 함수
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에 속성에 사용할 수 있는 값은 다음과 같다.
키워드
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
CSS3부터는 linear-gradient 함수를 사용할 수 있다. 브라우저마다 지원이 가능한 경우와 불가능한 경우로 나눠지므로 사용 시 이를 확인할 필요가 있다.
자동으로 생성하는 사이트들이 많이 있기 때문에 참고하면 원하는 그라디언트를 손쉽게 생성할 수 있다.
