Header-Grafik für mobile Version
Moderator: HTML-Laie
- Watsing
- 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
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/
Wie kann kann ich dies Ändern, im Ordner Style?
Webseite: http://www.helpthaidogs.com/
Sonnige Grüsse aus Thailand wünscht Euch Olav.
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
- HTML-Laie
- Moderator
- Beiträge: 356
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Header-Grafik für mobile Version
In deiner Style.css zu deinem Design steht folgender Abschnitt bei deinem Hintergrundbild:
Ändere dies mal auf:
LG Hape
Code: Alles auswählen
background-size: cover;
Code: Alles auswählen
background-size: auto;
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- Watsing
- 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
Ich habe den Code geändert, leider hat es nichts gebracht. Die Header-Grafik wird dadurch viel zu groß angezeigt!HTML-Laie hat geschrieben:In deiner Style.css zu deinem Design steht folgender Abschnitt bei deinem Hintergrundbild:Ändere dies mal auf:Code: Alles auswählen
background-size: cover;
LG HapeCode: Alles auswählen
background-size: auto;
Sonnige Grüsse aus Thailand wünscht Euch Olav.
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
- moni
- Held des Forums
- Beiträge: 8343
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Header-Grafik für mobile Version
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
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 !
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% ;
Ein Hinweis noch : dein Bild ist mit 736,18 KB super schwer ,versuche den leichter zu machen !
Viele Grüße ...Monika
- HTML-Laie
- Moderator
- Beiträge: 356
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Header-Grafik für mobile Version
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
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- Watsing
- 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
Wenn ich den Code ändere und die Webseite mit meinem Smartphone anschaue, ist das Bild stark verzerrt.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
ABER !!! nur bis gewissen Auflösung , dann kann sich das Bild das Bild unproportional verzehren , was auch nicht schön aussieht ..Code: Alles auswählen
background-size: 100% 100% ;
Ein Hinweis noch : dein Bild ist mit 736,18 KB super schwer ,versuche den leichter zu machen !
Ich versuche es mal mit anderen Header-Grafiken!
Sonnige Grüsse aus Thailand wünscht Euch Olav.
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
- moni
- Held des Forums
- Beiträge: 8343
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
- Kontaktdaten:
Re: Header-Grafik für mobile Version
Viele Grüße ...Monika
- Watsing
- 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
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.
Schau dass ich ein Foto eines Strassenhundes machen kann bei welchem der Hintergrund etwas dunkler ist, oder ich ändere die Schriftfarben.
Sonnige Grüsse aus Thailand wünscht Euch Olav.
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
https://www.mangogarden.net
http://mein-leben-in-thailand.blogspot.com/
http://www.watsing.com
http://www.helpthaidogs.com
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste