다른 화면 해상도에 대해 응답하는 헤더 만들기

Question

응답 성있는 헤더를 만들려고합니다. 현재 머리글은 고정되어 있으며 다른 화면 resoultions에서 보면 모양이 좋지 않습니다.

#tie-wrapper #theme-header { 
 
    background-image: url(http://example.com/header-image.jpg); 
 
    background-repeat: no-repeat; 
 
}

나는 서로 다른 해상도에 같은 이미지를 가지고 싶습니다. 그것은 웹 사이트와 함께 감소해야합니다. 또한 로고가 중심이므로 이미지가 있어야합니다.

다른 해상도의 이미지를 추가하는 방법을 모르겠습니다.

감사

Answer 1

당신은 CSS를 사용하여 다른 화면 폭에 서로 다른 이미지를 사용할 수 있습니다

@media only screen and (max-width: 1023px) { 
    #tie-wrapper #theme-header { 
     background: url('http://example.com/header-image_FULLWIDTH.jpg') center center/cover no-repeat; 
     min-height: 500px; 
     width: 100%; 
    } 
} 
@media only screen and (max-width: 767px) { 
    #tie-wrapper #theme-header { 
     background: url('http://example.com/header-image_LARGE.jpg') center center/cover no-repeat; 
     min-height: 400px; 
    } 
} 
@media only screen and (max-width: 480px) { 
    #tie-wrapper #theme-header { 
     background: url('http://example.com/header-image_MEDIUM.jpg') center center/cover no-repeat; 
     min-height: 300px; 
    } 
} 

나는 보통 내 템플릿 파일 및 wp_get_attachement()을 사용하여이 코드를 추가 할 이미지의 다른 크기를로드합니다. 또는 styles.css에서 하드 코딩 할 수 있습니다. 어느 쪽이든.