異なる画面解像度で応答するヘッダーを作成する

Question

ヘッダーを応答可能にしようとしています。現在のところヘッダーは固定されていて、別の画面からスクリーンを見ると、見た目が良くないです。

#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でハードコードすることもできます。どちらにしても。