프런트 엔드 개발에서 전체 화면 반응형 배경 이미지를 만드는 방법은 무엇입니까?

전체 화면 반응형 배경 이미지 만들기

프런트 엔드 개발 초보자로서 반응형 전체 화면 배경 이미지를 만들면 도전해 보세요. 코드의 문제를 해결할 수 있는 방법은 다음과 같습니다.

코드 분석:

제공된 HTML 및 CSS 코드에는 "main-header" div 내의 여러 요소가 포함되어 있습니다. 배경 이미지를 담기 위한 것입니다. 그러나 배경 이미지 설정은 이러한 요소에 적용되지 않습니다.

해결책:

전체 "메인 헤더" div를 전체 화면 배경 이미지로 만들려면, CSS를 다음과 같이 수정해야 합니다.

.main-header {
  background-image: url(../img/bb-background2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

모바일 반응성:

모바일 장치의 배경 이미지 위에 "large-6 Large-offset-6 columns" div를 배치하려면 다음 CSS 미디어 쿼리를 사용할 수 있습니다.

@media screen and (max-width: 767px) {
  .large-6.large-offset-6.columns {
    position: absolute;
    top: 0;
  }
}

대체 접근 방식:

여러 대체 기술을 사용하여 반응적으로 크기가 조절되는 전체 화면 배경 이미지:

• CSS 배경 이미지: body 요소에서 직접 background-image 속성을 설정하세요.
• Img 태그: 적절한 CSS와 함께 img 태그를 사용하여 전체를 채웁니다. viewport.
• jQuery: jQuery를 활용하여 창 크기에 따라 이미지 크기와 위치를 동적으로 조정합니다.

권장 리소스:

자세한 지침은 다음 문서를 참조하세요. http://css-tricks.com/perfect-full-page-Background-image/

위 내용은 프런트 엔드 개발에서 전체 화면 반응형 배경 이미지를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!