테스트 사이트 - 개발 중인 베타 버전입니다

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

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


배경 이미지

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

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

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;
}

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

background-size: contain; 과 background-size: cover;에 대해 한 수 배우고 갑니다
꾸벅~

게시글 목록

번호 제목
2922
2921
2920
2919
2918
2917
2915
2914
2913
2912
2910
2909
2908
2907
2906
2905
2903
2902
2901
2900
2899
2897
2896
2895
2892
2891
2890
2889
2873
2866