배경 속성
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는 배경색을 설정하기 위한 속성이다.
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 함수를 사용할 수 있다. 브라우저마다 지원이 가능한 경우와 불가능한 경우로 나눠지므로 사용 시 이를 확인할 필요가 있다.
자동으로 생성하는 사이트들이 많이 있기 때문에 참고하면 원하는 그라디언트를 손쉽게 생성할 수 있다.
Last updated
