요즘에는 반응형 배경 이미지를 갖춘 웹사이트에 대한 수요가 많습니다. 반응형 웹사이트는 모바일, 태블릿, 데스크톱을 포함한 거의 모든 기기에서 사용자에게 이상적인 사용자 경험을 제공합니다. 반응형 이미지는 웹사이트의 배경, 화면 크기, 크기에 맞게 조정할 수 있습니다. 반응형 이미지는 품질과 비율이 유지되도록 보장합니다. 또한 반응형 배경 이미지가 포함된 웹사이트가 빠르게 로드됩니다.
이 가이드에서는 배경 이미지를 화면 크기에 맞게 조정하는 방법에 대한 지침을 제공합니다.
배경 이미지를 화면 크기에 맞게 조정하는 방법은 무엇입니까?
아래 제공된 단계별 지침을 따르면 이미지가 화면 크기에 맞게 조정될 수 있습니다.
1단계: HTML 구조 만들기
먼저 HTML 구조를 생성하고 다음을 사용하여 외부 스타일 시트를 추가합니다. <링크> HTML의 head 섹션에 태그를 추가하세요. 이를 위해 간단히 ' ” head 태그 안에 있습니다. “ 상대 ” 태그는 파일과 HTML 문서의 관계를 지정합니다. “ href ” 태그는 CSS 파일 주소를 지정합니다.
< HTML >
< 머리 >
< 링크 상대 = '스타일시트' href = '스타일.css' >
< 제목 > 반응형 배경 이미지 제목 >
머리 >
< 몸 >
-- 기타 콘텐츠를 추가하는 영역-- >
몸 >
HTML >
2단계: CSS 적용
이제 CSS를 “ 몸 ' 부분. 먼저 배경 이미지를 지정합니다. 이를 위해 “ 배경 이미지 '를 지정하고 ' URL() ” 이미지 파일 주소가 포함된 값입니다.
그 후에는 ' 배경 이미지 ”를 사용하여 이미지 크기를 지정하려면 “ 배경 반복 ” 이미지의 반복을 설정하는 속성, 그리고 “ 배경 첨부 ”를 사용하여 이미지가 페이지의 나머지 부분과 함께 스크롤되는지 여부를 설정합니다. 마지막으로 “ 여유 ' 그리고 ' 심 ' 에게 ' 0 ':
몸 {배경 이미지: url ( '테스트-이미지.jpg' ) ;
배경 크기: 100 % 100 % ;
/* 이미지 크기를 조정하세요. 100 % 너비와 100 % 키 */
background-repeat: 반복하지 않음;
배경 부착: 고정;
여유: 0 ;
심: 0 ;
/* 선택사항: 고정된 배경 */
}
산출
다음은 브라우저 창을 축소하기 전의 출력입니다.
브라우저 수축 후:
위 출력은 이미지가 배경을 화면 크기에 맞게 조정했음을 확인합니다.
결론
배경 이미지를 화면 크기에 맞게 조정하려면 먼저 ' 뷰포트 '를 헤드 섹션에 추가하여 크기와 배율을 제어합니다. 그런 다음 HTML 구조를 만들고 CSS를 적용합니다. CSS에서 “ 배경 크기 ” 속성 값을 “ 씌우다 ” 값을 사용하여 이미지의 높이와 너비를 조정합니다. 이 문서에서는 배경 이미지를 화면 크기에 맞게 조정하는 방법에 대한 완전한 가이드를 제공했습니다.