Header-Grafik für mobile Version

[Watsing]

Bei meiner neuen Webseite verwende ich eine Header-Grafik mit einer Auflösung von 2500 x 1215 Pixel. Bei der PC-Version wird das ganze Bild angezeigt, bei der Ansicht mit einem mobilen Gerät wird nur ein Bildausschnitt angezeigt.

Wie kann kann ich dies Ändern, im Ordner Style?

Webseite: http://www.helpthaidogs.com/

[HTML-Laie]

In deiner Style.css zu deinem Design steht folgender Abschnitt bei deinem Hintergrundbild:

Code: Alles auswählen

 background-size: cover;

Ändere dies mal auf:

Code: Alles auswählen

background-size: auto;

LG Hape

[Watsing]

In deiner Style.css zu deinem Design steht folgender Abschnitt bei deinem Hintergrundbild:

Code: Alles auswählen

 background-size: cover;

Ändere dies mal auf:

Code: Alles auswählen

background-size: auto;

LG Hape

Ich habe den Code geändert, leider hat es nichts gebracht. Die Header-Grafik wird dadurch viel zu groß angezeigt!

[moni]

Hallo Olaf ..

es ist nicht so einfach das Hintergrund so zu Positionieren das auch auf mobil 1.1 exakt das HD mit verkleinert wird ,
das kann zum b mit diesen Code gehen

Code: Alles auswählen

background-size: 100% 100% ; 

ABER !!! nur bis gewissen Auflösung , dann kann sich das Bild das Bild unproportional verzehren , was auch nicht schön aussieht ..


Ein Hinweis noch : dein Bild ist mit 736,18 KB super schwer ,versuche den leichter zu machen !

[HTML-Laie]

Ich würde schon fast sagen das das Hauptmotiv, also der Hund auf dem Bild alleine schon riesig ist, dann dazu noch der Rest des Bildes das kann man schon fast nicht mehr auf Handyformat zusammenquetschen.

Habe mal das Design testweise installiert und hiermit: https://www.webfx.com/blog/web-design/r ... und-image/ rumgespielt. Damit klappt es besser. Teste aber noch weiter.

LG Hape

[Watsing]

Hallo Olaf ..

es ist nicht so einfach das Hintergrund so zu Positionieren das auch auf mobil 1.1 exakt das HD mit verkleinert wird ,
das kann zum b mit diesen Code gehen

Code: Alles auswählen

background-size: 100% 100% ; 

ABER !!! nur bis gewissen Auflösung , dann kann sich das Bild das Bild unproportional verzehren , was auch nicht schön aussieht ..


Ein Hinweis noch : dein Bild ist mit 736,18 KB super schwer ,versuche den leichter zu machen !

Wenn ich den Code ändere und die Webseite mit meinem Smartphone anschaue, ist das Bild stark verzerrt.

Ich versuche es mal mit anderen Header-Grafiken!

[moni]

mit diese Grafik sieht schon mal besser aus ,der Hund bleibt auf mobil schön in die Mitte ..

[Watsing]

Danke dass Du es getestet hast.

Schau dass ich ein Foto eines Strassenhundes machen kann bei welchem der Hintergrund etwas dunkler ist, oder ich ändere die Schriftfarben.