CSS3 - 배경 속성

속성	설명
background-image	배경에 넣을 그림을 지정
background-size	넣은 그림의 크기를 지정
background-repeat	넣은 그림의 반복 패턴을 변경
background-attachment	넣은 그림이 배경에 붙이는 방식을 변경
background-position	넣은 그림의 위치를 임의로 지정
background-color	배경에 색을 지정합니다.

background-image 속성

URL 단위를 이용하여 배경에 이미지를 삽입한다. style안에 body태그에 background-image를 이용해 이미지를 삽입하고, 이미지는 CSS3부터 여러개의 배경 이미지를 적용할 수 있다.

background-image.zip

3.19MB

background-size 속성

background-size 속성은 삽입된 그림의 크기를 조절하는 기능을 한다. 사이즈는 너비와 높이 순으로 지정할 수 있다. 또한 두개 이상의 그림을 배경으로 지정한 경우 ','를 이용해서 각각의 그림에 따로 크기를 지정할 수 있다.

 

사이즈를 직접 지정하는 것 외에도 contain 키워드와 cover 키워드가 있는데, contain은 너비를 100% 지정한 것 과 같은 효과이고 cover은 높이를 100%로 지정한 것 과 같다.

background-size.html

0.00MB

background-repeat, background-attachment, background-position

background-repeat 속성은 삽입된 그림의 패턴을 정하는 것이고 키워드로는 repeat-x, repeat-y 그리고 no-repeat이 있다. repeat-x는 X축 방향으로 그림이 반복, repeat-y는 Y축 방향으로 그림이 반복되고 no-repeat은 그림이 반복되지 않게 한다.

 

background-attachment 속성은 그림을 배경에 어떤 방식으로 붙일 것인지 지정할 수 있다. scroll과 fixed 키워드가 있다. scroll은 그림이 스크롤에 따라 같이 움직이고 fixed는 배경에 고정이되어 스크롤을 움직여도 고정된다.

 

background-position 속성은 그림의 위치를 지정할 수 있다. 아래와 같은 형태로 값을 적용한다.

background-position: 키워드(top, bottom, left, right 등); background-position: X축 크기; background-position: X축 크기, Y축 크기;

background-repeat, background-attachment, background-position.html

0.00MB