Header für verschiedene Bildschirmauflösungen reagieren

-5

Ich versuche Header reagieren zu lassen. Derzeit ist der Header fest und wenn Sie es aus verschiedenen Bildschirmeinstellungen sehen, sieht es nicht gut aus.Header für verschiedene Bildschirmauflösungen reagieren

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

Ich möchte auf verschiedene Auflösungen gleiches Bild haben. Es sollte mit der Website abnehmen. Auch das Logo ist zentriert, so dass das Bild sein sollte.

Ich weiß wirklich nicht, wie Sie dieses Bild für verschiedene Auflösungen hinzufügen.

Dank

Quelle

2017-12-05 markobb

Fragen, die Code-Hilfe suchen, müssen den kürzesten Code enthalten, der für die Reproduktion erforderlich ist ** in der Frage selbst ** Siehe [** Erstellen eines minimalen, vollständigen und überprüfbaren Beispiels **] (http://stackoverflow.com/help/mcve) –

Da Ihr Code-Snippet nicht läuft, hilft uns ein Screenshot oder ein anderes visuelles Hilfsmittel, wie es jetzt aussieht (und ein Beispiel von etwas, das Ihrem Aussehen ähnelt), um Ihre Frage zu beantworten. –

können Sie verschiedene Bilder mit unterschiedlichen Rasterweiten verwenden mit 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; 
    } 
}

Ich werde normalerweise diesen Code in meiner Vorlagendatei hinzufügen und mit wp_get_attachement(), laden verschiedene Größen von Bildern auf. Oder Sie können es in Ihrer styles.css fest codieren. In jedem Fall.

Quelle

2017-12-05 15:01:46 Samyer

Es ist kein Hintergrundbild für die ganze Site. Es ist nur für den Header, wo dieser Code befindet: # tie-wrapper # theme-header – markobb

behoben mit Css-Selektoren. – Samyer

können Sie dies als die Antwort markieren, wenn dies für Sie funktioniert. – Samyer

Header für verschiedene Bildschirmauflösungen reagieren

Antwort

Verwandte Themen