Header-Grafik für mobile Version

CSS, Java Script u.s.w

Moderatoren: moni, HTML-Laie

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

Header-Grafik für mobile Version

Beitragvon Watsing » Di 19. Feb 2019, 07:53

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: 98
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitragvon HTML-Laie » Di 19. Feb 2019, 15:30

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-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein

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

Re: Header-Grafik für mobile Version

Beitragvon Watsing » Mi 20. Feb 2019, 08:59

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
Moderator
Moderator
Beiträge: 7908
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitragvon moni » Mi 20. Feb 2019, 10:24

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: 98
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitragvon HTML-Laie » Mi 20. Feb 2019, 22:07

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/responsive-background-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-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein

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

Re: Header-Grafik für mobile Version

Beitragvon Watsing » Do 21. Feb 2019, 06:38

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
Moderator
Moderator
Beiträge: 7908
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitragvon moni » Do 21. Feb 2019, 09:09

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: 1219
Registriert: So 5. Mai 2013, 08:21
Mein Vorname: Olav
Wohnort: Watsing / Thailand
Kontaktdaten:

Re: Header-Grafik für mobile Version

Beitragvon Watsing » Do 21. Feb 2019, 09:24

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.


Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

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