[3.1] bg_header-Bild responsiv?

[eumelchen]

Hallo zusammen,

in meinem 3.1-Forum habe ich ein Headerbild (bg_header.gif) mit einer Größe von 1200 x 120 Pixel. Das ist so groß weil eine Totale dargestellt wird.
Allerdings ist die angezeigte Bildbreite des Headerbildes abhängig von der jeweiligen Auflösung des Bildschirmes, Bildteile vom rechten Rand des Bildes werden bei kleineren Bildschirmgrößen dann abgeschnitten.
Wenn das Forum auf dem Smartphone angeschaut wird sieht man nur einen kleinen Streifen vom oberen Rand des Bildes.

Gibt es eine Möglichkeit dieses Bild responsiv darzustellen?
Wenn ja, wo muss ich was ändern?

Ich mache gerade Versuche mit 3.2, da ist das gleiche Problem, nur heißt die Datei dort bg_headerpic.gif, d.h. da werde ich irgendwann auch eine Lösung benötigen. Vielleicht ist aber die Lösung für beide Versionen identisch.

LG eumelchen

[Joyce&Luna]

Hi

Probiere mal den zusätzlichen Befehl background-size: 100% auto;

Anke

[Melmac]

Hi,

gib uns doch bitte mal einen Link zu Deinem Board, damit man sich dies anschauen kann
Welchen Style verwendest Du?

Hast Du vor, im Header eine eigene Grafik / ein Logo einzubauen, das dann auch mit den verschiedenen Auflösungen skaliert?

[eumelchen]

Hallo Melmac,

ich verwende ein leicht modifiziertes Prosilver.
Hier der Link: http://chiforum.de

Nachtrag:
Das Logo wird sowieso bei der Smartphone-Ansicht nicht angezeigt, mir geht es um das Header-Bild (bei 3.1 = bg_header.gif und bei 3.2 = bg_headerpic.gif)
Diese Grafik möchte bei allen Größen skaliert haben.

Probiere mal den zusätzlichen Befehl

Code: Alles auswählen

background-size: 100% auto;

Hallo Anke, in welche Datei soll denn der Befehl rein?

[Joyce&Luna]

Da ich mir jetzt das Forum angesehen habe, bringt dir dieser Befehl nichts.

Ich dachte du meinst den Hintergrund.

Edit: Kannst höchstens mal versuchen in deiner headerbar den Code background-size: 100% 100%;

Anke

[eumelchen]

Trotzdem Danke, Anke.

Ich hatte ja extra die Dateinamen der Grafiken mit angegeben, ich dachte dann wäre es ersichtlich was ich meine.
Habe ich wohl falsch gedacht. Sorry.

[Joyce&Luna]

Habe meinen Text noch mal editiert.

Vielleicht habe ich auch nur falsch gelesen

[eumelchen]

Anke, ich habe Deinen neuen Vorschlag ausprobiert, es funktioniert! Danke!

[Melmac]

@eumelchen

Da es dann ums Logo des Boards geht, wäre dies die "falsche" Grafik gewesen, an der Du angesetzt hast - die bg_header.gif ist wirklich nur für die farbliche Darstellung des Hintergrunds zuständig

Vorschlag meinerseits, weil es genau hierfür auch eine Extension gibt:

• Speichere die momentan verwendete bg_header.gif im gleichen Verzeichnis (=> /styles/prosilver/theme/images/) unter dem Namen site_logo.gif ab (Du überschreibst damit das originale prosilver-Log)
• Nimm bitte wieder alle Änderungen zurück (gerade auch die am CSS), die Du für den Einbau der Grafik vorgenommen hast.
• Lade Dir diese Extension herunter und installiere sie: [3.1][3.2] Sitelogo responsive
• Konfiguration vornehmen im ACP > Erweiterungen > Sitelogo Responsive
• sicherheitshalber Caches leeren

Fertig
=> [ externes Bild ]


Falls Du noch Korrekturen an der Anzeige vornehmen willst/musst, dann bitte dieses CSS-File verwenden:
/ext/kirk/site_logo_responsive/styles/prosilver/theme/site_logo_responsive_3_1.css


----------------------------------

Nachtrag:

@Joyce

Das Problem bei dem von Dir gewählten Ansatz:
Das Ergebnis ist nicht wirklich responsive - lass die Seite jetzt mal durch ein entsprechendes Tool laufen, dann ist zu sehen, dass die Grafik nicht proportionengetreu skaliert wird. Zwangsläufig
-

[eumelchen]

Hallo Melmac,

diese Extension habe ich versuchsweise im 3.2-Forum eingebaut. Es wird zwar dann das Logo in der Smartphone-Ansicht angezeigt, das Header-Bild ist aber dann stark verkürzt.
Allerdings habe ich dann den Nachteil das mein Logo auf dem Smartphone viel Platz braucht und das "eigentliche" Forum erst sehr weit unten beginnt.