Hi Gunter,
schau mal hier:
http://caniuse.com/#search=background-attachment
und hier:
http://stackoverflow.com/questions/2147 ... ize-on-ios
Hallo,
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Re: Addon rexponsive - Responsive Webdesign mit Redaxo
Hallo Daniel,
danke für den Hinweis, zeigt alles in die Richtung in die ich derzeit auch schon schaue.
Das Problem ist definitiv "background-attachment : fixed;". Dadurch wird das Image vom div gelöst und an den viewport gebunden.
Der vieport bzw. dessen Größe bestimmt also die Darstellung des images und der browser kümmert sich nicht mehr darum of und wie das div (hier: jumbotron) responsive angepasst wurde.
Auch alle anderen background Attribute wie bg-poition und bg-cover beziehen sich nun auf den viewport.
Wenn jetzt die Imageauflösung responsiv verringert wird, geht das ganze nach hinten los. Die Bildauflösung wird bei verkleinertem Jumbotron reduziert, da hält dann der Browser dagegen um das reduzierte Bild wieder auf die viewport-größe zu strecken. So produziert man pixelige Jumbotrons.
Dabei ist das Medium, also desktop, mobile oder tablet vollig irrelevat, es fällt halt nur an den Mäusekinos deutlicher auf.
Ich habe mal, um die Zusammenhänge zu verdeutlichen, meine Tests als ein simples Beispiel ins Netz gestellt: Nur HTML, Bootstrap und etwas javascript um die lauf-parameter verändern zu können.
http://service.prestosoft.de
Hier mal mit der Größe des Browserfensters spielen - dies zeigt was hier passiert. Dabei mal die fixierung an und abschalten und auch mal (dies simuliert die Rex Image Manager aktivitäten im Zusammenspiel mit Responsive Image) die Mediaqueries dazu- bzw. wegschalten
LG
Gunter
danke für den Hinweis, zeigt alles in die Richtung in die ich derzeit auch schon schaue.
Das Problem ist definitiv "background-attachment : fixed;". Dadurch wird das Image vom div gelöst und an den viewport gebunden.
Der vieport bzw. dessen Größe bestimmt also die Darstellung des images und der browser kümmert sich nicht mehr darum of und wie das div (hier: jumbotron) responsive angepasst wurde.
Auch alle anderen background Attribute wie bg-poition und bg-cover beziehen sich nun auf den viewport.
Wenn jetzt die Imageauflösung responsiv verringert wird, geht das ganze nach hinten los. Die Bildauflösung wird bei verkleinertem Jumbotron reduziert, da hält dann der Browser dagegen um das reduzierte Bild wieder auf die viewport-größe zu strecken. So produziert man pixelige Jumbotrons.
Dabei ist das Medium, also desktop, mobile oder tablet vollig irrelevat, es fällt halt nur an den Mäusekinos deutlicher auf.
Ich habe mal, um die Zusammenhänge zu verdeutlichen, meine Tests als ein simples Beispiel ins Netz gestellt: Nur HTML, Bootstrap und etwas javascript um die lauf-parameter verändern zu können.
http://service.prestosoft.de
Hier mal mit der Größe des Browserfensters spielen - dies zeigt was hier passiert. Dabei mal die fixierung an und abschalten und auch mal (dies simuliert die Rex Image Manager aktivitäten im Zusammenspiel mit Responsive Image) die Mediaqueries dazu- bzw. wegschalten
LG
Gunter
read the manual first
-
runstop64
- Beiträge: 369
- Registriert: 23. Okt 2012, 21:34
- Wohnort: Hamburg
- Kontaktdaten: Website Facebook Twitter
Re: Addon rexponsive - Responsive Webdesign mit Redaxo
Hi Gunter,
ich würde es sogar noch weiter einschränken: Es ist die Kombination von background-attachment:fixed; und background-size:cover; bzw. 100% Höhe -- Damit zieht der Browser stets das Bild auf die volle Viewport-Höhe auf. Wenn Du das Hintergrund-Bild tatsächlich über Media-Queries austauscht, reicht es evtl., es nur zu positionieren und die Größe original zu belassen.
ich würde es sogar noch weiter einschränken: Es ist die Kombination von background-attachment:fixed; und background-size:cover; bzw. 100% Höhe -- Damit zieht der Browser stets das Bild auf die volle Viewport-Höhe auf. Wenn Du das Hintergrund-Bild tatsächlich über Media-Queries austauscht, reicht es evtl., es nur zu positionieren und die Größe original zu belassen.
Re: Addon rexponsive - Responsive Webdesign mit Redaxo
Hallo Daniel (von der Nachtschicht - wie ich sehe 
),
du hast absolut recht - es ist die Konbination aus beiden, mit "fixed" ordne ich das Image dem viewport background zu und mit "cover" sorge ich für die Bindung an dessen Höhe und sorge damit für mein Problem - dem unerwünschten Aufspreizen des Images.
Ich werde mal die "background-size: cover" durch "background-size: 100% 100%" ersetzen. Dann kann ich diese Werte für weitere Tests einzeln an und ausschalten bzw. durch "auto" ersetzen.
Danke für den Tip.
LG
Gunter
),du hast absolut recht - es ist die Konbination aus beiden, mit "fixed" ordne ich das Image dem viewport background zu und mit "cover" sorge ich für die Bindung an dessen Höhe und sorge damit für mein Problem - dem unerwünschten Aufspreizen des Images.
Ich werde mal die "background-size: cover" durch "background-size: 100% 100%" ersetzen. Dann kann ich diese Werte für weitere Tests einzeln an und ausschalten bzw. durch "auto" ersetzen.
Danke für den Tip.
LG
Gunter
read the manual first