Header-Grafik für mobile Version

CSS, Java Script u.s.w

Moderator: HTML-Laie

Antworten
Benutzeravatar
Watsing
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1236
Registriert: So 5. Mai 2013, 08:21
Mein Vorname: Olav
Wohnort: Watsing / Thailand
Kontaktdaten:

Header-Grafik für mobile Version

Beitrag von 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/

:X
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitrag von 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 :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Watsing
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1236
Registriert: So 5. Mai 2013, 08:21
Mein Vorname: Olav
Wohnort: Watsing / Thailand
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitrag von Watsing »

HTML-Laie hat geschrieben: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!
:X
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitrag von 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 !
Viele Grüße ...Monika
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitrag von 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 :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Watsing
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1236
Registriert: So 5. Mai 2013, 08:21
Mein Vorname: Olav
Wohnort: Watsing / Thailand
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitrag von Watsing »

moni hat geschrieben: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!
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitrag von moni »

Bild

mit diese Grafik sieht schon mal besser aus ,der Hund bleibt auf mobil schön in die Mitte ..
Viele Grüße ...Monika
Benutzeravatar
Watsing
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1236
Registriert: So 5. Mai 2013, 08:21
Mein Vorname: Olav
Wohnort: Watsing / Thailand
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitrag von Watsing »

Danke dass Du es getestet hast. :DA

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

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 18 Gäste