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

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 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;
}

스폰서링크

댓글 전체

전체 1,137
퍼블리셔팁 내용 검색

회원로그인

진행중인 포인트경매

  1. [도서] PHP7 예비학교

    참여229 회 시작17.11.17 15:54 종료17.11.22 15:54

(주)에스아이알소프트 (06253) 서울 강남구 강남대로 310, 1312호 (역삼동, 유니온센터) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT