Header Image auf Mobilgeräten austauschen oder ändern

lindaliebevoll

Hallo Leute,

ich habe ein Problem mit der responsiven Ansicht meiner Homepage.

Auf dem Smartphone ist das Headerbild abgeschnitten. Nun möchte ich es lediglich in der mobilen Ansicht austauschen. Ich habe schon einiges versucht u.a. diese css:

@Media screen and (max-width: 480px){
.site-branding {
background: url(your image URL) center center;
}}

und das Verschieben der Image hat auch nicht geklappt.
Ich denke ich habe soviele Snippets oder css Codes eingefügt, dass betreffende Lösungen negiert werden.

Ich nutze ein Childtheme von Storefront und hier findet ihr meine HP :https://www.lindaliebevoll.de

Villeicht kann ja einer helfen.

Vielen Dank im Voraus.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Versuche mal das:

Code

.site-header {
    background-size: 100%;
    background-repeat: no-repeat;
}

lindaliebevoll

Hammer, vielen Dank. Das hat funktioniert.
Das Header- Image ist aber in der mobilen Ansicht nun wirklich klein.
Gibt es da auch eine Lösung für? Daher dachte ich mir, es wäre besser ein anderes Bild für die mobile Ansicht zu verwenden.

oliver_3501

Füge mal folgendes im Costumizer bei Zusätzlichem CSS ein (your Image URL natürlich mit der bild URL ersetzen):

CSS

@media screen and (max-width: 768px) {
                .site-header {
                    background-image: url('your image URL') !important;
                }

lindaliebevoll

Großartig.
Habe mich bestimmt 1h durch Google gesucht und einiges ausprobiert.
Ich danke vielmals!!!!
Perfekt und wie gewünscht!

oliver_3501

Gerne doch, kein Problem :)
Bei solchen Fragen kannst du gerne wieder auf mich zukommen ;)

lindaliebevoll

Na wenn das so ist :-)

Wenn ich jetzt den Menüreiter in der mobilen Ansicht anklicke, verschiebt sich das Headerlogo hinter den Text. Ich könnte damit leben, wenn es ganz nach rechts gehen würde, aber so verdeckt es den Text.

SirEctor

ergänze mal
background-position: top left;

Sailor56

... und mache vielleicht das Bild, je nach Displaybreite etwas kleiner...

Code

@media screen and (max-width: 768px) {
 .site-header {
    background-position: left top;
    background-size: 67%;
}
@media screen and (max-width: 630px) {
 .site-header {
    background-size: 85%;
} 
@media screen and (max-width: 550px) {
 .site-header {
    background-size: 100%;
}

Alles anzeigen

oliver_3501

Zitat von SirEctor

background-position: top left;

Stimmt hatte ich vergessen, dann ist das Bild richtig ausgerichtet :)

lindaliebevoll

Das mit dem Menü klappt schon mal. Ich musste nur 3 Klammern hinzufügen, die gefehlt haben.
Dankeschön dafür!
Jetzt ist das Logo ganz oben in der ecke. Kann ich da mit margin-top oä. noch nachhelfen?

oliver_3501

Zitat von lindaliebevoll

3 Klammern hinzufügen, die gefehlt haben

Oh ja, sry habe ich auch gerade bemerkt, das mit Tippen von Code ist auf dem Handy nicht so einfach :D

Code

@media only screen and (max-width: 768px) {
  .site-logo .custom-logo-link {
    margin-top: 7px;
    margin-left: 7px;
  }
}

Werte eben entsprechend anpassen, falls du einen einheitlichen Abstand von allen 4 Seiten des Logos aus willst, solltest du besser nur „margin“ verwenden, anstatt 4 gleiche Werte anzugeben.

Mfg:)

lindaliebevoll

da ändert sich erstmal garnichts.

ist .site-logo richtig? war ja sonst .site-header? Habe ich auch geändert, tut sich trotzdem nix.

.custom-logo-link < soll da wieder die URL rein? Habe ich auch probiert, passiert auch nichts :-)

Sailor56

Es sollte weiterhin das background-image des Containers 'class="site-header" ' sein... und Hintergrundbilder lassen sich nicht mit margin oder padding positionieren. Lediglich das Element, in dem dieses Hintergrundbild eingebettet ist, könnte man damit beeinflussen.
Hintergrundbilder werden mit 'background-position:' oder auch mit 'background-position-x:' und 'background-position-y:' dorthin gebracht, wo man sie hin haben will. In deinem Fall könntest du mal mit...

Code

.site-header {
    background-position-x: 5px;
    background-position-y: 0px;
}

versuchen zum Erfolg zu kommen.

oliver_3501

Zitat von Sailor56

lassen sich nicht mit margin oder padding positionieren

Das ist mir auch klar, aber wir wollen ja die Postion des gesamten Logo Elemis ändern und nicht nur die Poistion des Hintergrundbilds im Div des Logos...

Probier das ganze mal so:

CSS

@media only screen and (max-width: 768px) {
  .site-header {
   margin-top: 7px !important;
   margin-left: 7px !important;
  }
}

lindaliebevoll

Hallo nochmal,

Beide funktionieren halbwegs. Olivers Version verschiebt aber leider den ganzen Header so nach rechts und unten, dass die Hintergrundfarbe zum Vorschein kommt und dadurch kommt die Hintergrundfarbe in der ecke hervor.
Sailors version klappt genauso wie gewünscht... zumindest in der mobilen Version. In der Desktopansicht ist das Image dann auch verschoben und teilweise verdeckt. Und der customizer zeigt im css "unknwon property backgroun-position.

Könnte das Problem daher kommen, dass ich als Header ein selbst erstelle Image eingefügt habe und kein Logo? Daher kann ich durch klicker auf das Header-Bild auch nicht einen Link folgen ???

oliver_3501

Dann habe ich noch ne Idee, beides mischen:

Code

@media only screen and (max-width: 768px) {
  .site-header {
  background-position-x: 5px;
   background-position-y: 0px;
  }
}

SirEctor

@Sailor56 Vorschlag gehört in den media-query. Dann verschiebt sich nichts am Desktop.

Und es heißt nicht backgroun-position. Es fehlt ein "d".

Zitat von lindaliebevoll

Und der customizer zeigt im css "unknwon property backgroun-position.

Es fehlt ein bisschen Eigeninitiative.

oliver_3501

Zitat von SirEctor

Vorschlag gehört in den media-query. Dann verschiebt sich nichts am Desktop.

Habe ich schon gerade so geschrieben :D

SirEctor

Zitat von oliver_3501

Habe ich schon gerade so geschrieben :D

Habe ich gerade gelesen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header Image auf Mobilgeräten austauschen oder ändern

Jetzt mitmachen!