CSS3 background 속성

css background

css background 속성에 대하여 알아보자.

html 문서에 이미지를 삽입하는 방법은 대표적으로 img tag를 사용하는 것과 style의  background  속성을 사용하는 방법이 있다.

 

 css3 style 속성 적용 방법은 개별 속성으로 적요하는 방법과 믹스형 속성 적용 방식있다.

background의 속성은  background-color, background-image, background-repeat, background-attachment, background-clip, background-size, background-position 등이 있다.

개별 속성적용은 속성명을 그대로 기재하고 값을 입력하면 된다.

 

background-size : 100%

믹스형 또는 다중속성 적용은 아래와 같이 표기한다. 

background: url('./img/bg.png') bottom / 100% no-repeat

'/' 앞쪽은 이미지 URL 과 background-position에 관련된 속성을 기재하고 '/' 뒤에는 나머지 속성을 기재한다.

 

지금까지 background 속성의 기본적인 내용과 표기 방법에 대하여 알아 보았다.

이제 아래 개별 속성에 대하여 알아보자.

 

 

backgorund-color

요소의 배경 색상을 지정한다.

background-color: #333333; /*hex코드 입력*/
background-color: rgba(255,255,255,1); /*rgba 코드 입력 red,green,blue,alpha*/
background-color: red; /*string 텍스트로 입력*/
background: red; /*믹스 다중속성표기 방법*/

 

 

background-image

요소의 배경 이미지를 지정한다.

background-image: url('./img/bg.png');
background: url('./img/bg.png');/*믹스 다중속성표기방법*/

 

 

background-repeat

배경의 반복을 지정한다.

background-repeat: repeat; /*기본(default) 반복*/
background-repeat: no-repeat; /*반복하지않음*/
background-repeat: repeat-x; /*x축 반복*/
background-repeat: repeat-y; /*y축 반복*/
background: no-repeat; /*믹스 다중속성표기 방법*/

 

 

background-attachment 

스크롤 시 배경 고정

background-attachment: scroll; /*기본(deafult)*/
background-attachment: fixed; /*브라우저 화면 고정*/

 w3scool.com 사이트에서 테스트 해볼 수 있습니다.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-attachment

W3Schools online HTML editor

 

 

background-clip

배경 자르기

background-clip: border; /*border영역까지 자르기*/
background-clip: padding; /*padding영역까지 자르기*/
background-clip: content; /*content영역까지 자르기*/

w3scool.com 사이트에서 테스트 해볼 수 있습니다.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-clip

W3Schools online HTML editor

 

 

background-size

배경 크기

background-size: 10px 500px;/*첫번째 값은 x축 두번째 값은 y축에 해당된다.*/
background-size: contain; /*요소에 이미지를 모두 넣기 가로세로 크기중 큰사이즈 기준*/
background-size: cover; /*요소에 배경을 채우기 가로세로 크기중 작은사이즈 기준*/

w3scool.com 사이트에서 테스트 해볼 수 있습니다.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size

W3Schools online HTML editor

 

 

background-position

배경위치지정

background-position: 10px 500px;/*첫번째 값은 x축 두번째 값은 y축에 해당된다.*/

w3scool.com 사이트에서 테스트 해볼 수 있습니다.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

W3Schools online HTML editor