CSS Types

CSS Types

Editing

<bg-size>

<'background-size'> 속성에 사용하는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

구문

  • CSS Backgrounds and Borders Module Level 3
    [ <length-percentage [0,∞]| auto ]{1,2} | cover | contain

사용되는 키워드

키워드요약
auto

이미지의 종횡비와 다른 차원의 크기를 사용하거나 실패하면 이미지의 원래 크기를 사용하거나 100%로 처리한다.

contain

배경 이미지의 비율을 유지하면서 어느쪽도 잘리지 않도록 비율에 따라서 요소의 가로 또는 세로에 꽉 차게 맞춘다. 따라서 요소의 가로와 세로 중 어느 한 방향은 배경 이미지가 미치지 않은 빈 곳이 생길 수도 있다.

cover

배경 이미지의 비율을 유지하면서 요소 내에 꽉 차게 보여 준다. 따라서 요소의 크기에 따라 배경 이미지의 가로와 세로 방향 중의 어느 한 곳은 일부 잘려 보이지 않을 수 있다.

사용되는 타입

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9