Problem bei der Darstellung des Hintergrund-Bilds auf Tablet und Handy 
Autor: Linda F.
Besucht 412,
Followers 1,
Geteilt 0
Hallo!
Ich habe ein Problem mit der Darstellung der Hintergrundbilder auf Tablets und Handys.
Während die Darstellung am PC wunderbar funktioniert, sind die HG-Bilder am z.B. ipad offenbar riesig und ich sehe nur ein paar Pixel. Ich nehme an, dass das Bild nicht automatisch an die richtige Größe angepasst wird.
Der Parallaxe-Effekt funktioniert ebenfalls nicht, aber der wäre nebensächlich.
Habt ihr vielleicht einen Tipp für mich, wie ich das mit den HG-Bildern hinkriege? Die Bilder sind entweder als jpg oder png gespeichert.
Vorab vielen Danke und lg
Linda
Gepostet am
Nicht direkt! Aber Hintergrundbild mit Parallax und HAndy spielen nicht zusammen. Wenn du auch am Handy bzw. Tablet eine korrekte Hintergrundgrafik willst, musst du den Parallax Effekt deaktivieren. Das Bild wird sowieso auch in der Desktop Version vergrößert, sonst bekommt es keinen sichtbaren PArallax Effekt zusammen. Ausserdem werden sowieso einige Dinge (STile) automatisch deaktiviert in der Handyversion.
Autor
Vielen Dank für die Info.
Hast du vielleicht auch eine Lösung für längeren Text? Ohne Parallaxe (fix) ist das HG-Bild durch den Text jetzt in jeder Ansicht zu groß.
Rollover-Text passt mit der Scroll-Leiste nicht ins Design - und sieht offen gesagt auch veraltet aus. Und automatisch durchlaufen geht in diesem Fall auch nicht.
Gibt es noch eine verborgene Alternative?
Lässt sich vielleicht das responsive Design komplett eigens bearbeiten?
... (It > De) ... vielleicht könnte der LINK zu Ihrer Online-Seite jemandem eine Überprüfung ermöglichen, um die Situation einzuschätzen ...
.
ciao
.
Autor
Ja, gern. Vielen Dank!
friewald.at/_Gerlinde-Website
... für meinen Teil kann ich Ihnen nur sagen, dass Sie versuchen sollten, vertikale Bilder für den Haltepunkt unter 720 Pixel zu verwenden ...
.
.
... Ich habe drei zufällige vertikale Bilder von Pixaby gemacht, um sie mit dem dreizeiligen Hintergrund zu testen ...
... die drei Bilder sind diese: ...
.
... also können Sie versuchen, diesen Code unter 720 Pixel auszuwerten, und falls Sie die Bilder im Code durch Ihre eigenen ersetzen, die Sie nur für diesen Haltepunkt vertikal machen:
<style>
@media (max-width: 719px) {
#imPageRowGraphics_1 {
background-image: url('https://cdn.pixabay.com/photo/2023/07/22/10/50/ship-8143169_640.jpg')!important; background-repeat:no-repeat !important; background-size:cover}
#imPageRowGraphics_3 {
background-image: url('https://cdn.pixabay.com/photo/2023/06/25/08/46/woman-8086721_640.jpg')!important; background-repeat:no-repeat !important; background-size:cover}
#imPageRowGraphics_4 {
background-image: url('https://cdn.pixabay.com/photo/2023/07/13/16/32/woman-8125236_640.jpg')!important; background-repeat:no-repeat !important; background-size:cover} div[id^='imPageRowGraphics_'] {background-attachment: fixed !important;}
}
</style>
-----------------------------------
ciao
.