반응이 빠른 웹 디자인 - 배경 이미지

배경 이미지

배경 이미지는 크기 조정 및 크기 조정에 응답 할 수도 있습니다.

여기에서는 세 가지 방법을 보여줍니다.

1. background-size속성이 "포함"으로 설정된 경우 배경 이미지의 크기가 조정되고 내용 영역에 맞춰보십시오. 그러나 이미지는 종횡비 (이미지의 폭과 높이 사이의 비례 관계)를 유지합니다.

다음은 CSS 코드입니다.

예
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}
 

2. background-size속성을 "100 % 100 %"로 설정하면 배경 이미지가 전체 내용 영역을 포함하도록 확장됩니다.

다음은 CSS 코드입니다.

예
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

3. background-size속성이 "표지"로 설정된 경우 배경 이미지가 전체 내용 영역을 포함하도록 확장됩니다. "표지"값은 종횡비를 유지하며 배경 이미지의 일부가 잘릴 수 있습니다.

다음은 CSS 코드입니다.

예
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}