반응이 빠른 웹 디자인 - 배경 이미지 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

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

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

본문

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


배경 이미지

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

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

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

추천
2

댓글 1개

전체 269
퍼블리셔팁 내용 검색 CSS에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT