상세 컨텐츠

본문 제목

CSS:: background property

HTML & CSS

by 비오스터딩 2020. 8. 22. 19:40

본문

{background: color || image || repeat || attachment || position}

 

> image : url("경로 입력")

> repeat : repeat-x, repeat-y, no-repeat

> attachment : fixed

> position : px, %, top, right, bottome, left, center

  - px: left기준 top기준

            (ex. position: 20px 30px)

 

>> 속성 값을 입력할 때 ','를 넣어주면 다른 배경의 속성값으로 인식되므로,

     한 배경의 여러 속성값을 입력하려면 ' '(공백)을 사용해야함.

 

 

{background-size: px, %, cover, contain }

-cover : 배경이미지 비율 그대로 큰 축에 배경을 맞춤(일부 배경 이미지 잘림)

-contain : 배경이미지 비율 그대로 짧은 축에 배경을 맞춤 (배경 이미지 전체가 요소 안으로 들어옴)

반응형

관련글 더보기

댓글 영역