CSS srcset für Backgrounds?
Bernd
- css
Hallo,
finde das Attribut srcset grundsätzlich ja supertoll in Kombi mit der Breitenangabe.
Was aber wenn man ein Produktfoto (Onlineshop) verwenden will, wo darauf Buttons/Infos sind?
Dann bleibt ja nix anderes übrig, als ein Hintergrundfoto mittels Background-Image zu verwenden... was vielleicht responsive ist, nicht aber je nach Auflösung verschiedene Varianten laden kann. Irgendwelche JS-Lösungen mal ausgenommen.
Oder geht es das Foto normal mit srcset in einen Div-Container zu packen und irgendwie obendrauf Texte/Buttons zu packen?
Danke, Bernd
@@Bernd
Dann bleibt ja nix anderes übrig, als ein Hintergrundfoto mittels Background-Image zu verwenden... was vielleicht responsive ist, nicht aber je nach Auflösung verschiedene Varianten laden kann.
Oder geht es das Foto normal mit srcset in einen Div-Container zu packen und irgendwie obendrauf Texte/Buttons zu packen?
LLAP 🖖
Hallo Gunnar,
die "@media-background"-Lösung klingt interessant, müsste aber vermutlich immer wegen der wechselnden Artikelfoto-URL "inline" mit in den HTML-Code oder?
Die Positionierung ist mir bekannt, würde auf dem "gehintergrundeten" Produktfoto also "absolut" funktionieren.
Und wenn ich img srcset nehmen? In ein DIV packen und ein 2. relative DIV mittels left oder so drüberpappen? Hab ich noch nie gemacht...
Grüße, Bernd
@@Bernd
Hallo Gunnar,
die "@media-background"-Lösung klingt interessant, müsste aber vermutlich immer wegen der wechselnden Artikelfoto-URL "inline" mit in den HTML-Code oder?
??
Und wenn ich img srcset nehmen? In ein DIV packen und ein 2. relative DIV mittels left oder so drüberpappen? Hab ich noch nie gemacht...
Container relativ positionieren, damit sich die Positionierung der Nachfahren auf den Container bezieht. Bild gar nicht positionieren; das, was darauf soll, absolut.
Die von djr genannte Variante mit Grid ist aber noch charmanter.
Ich hab mal beides gegenübergestellt.
LLAP 🖖
@@Gunnar Bittersmann
Die von djr genannte Variante mit Grid ist aber noch charmanter.
Und jetzt mit noch mehr Charme:
Statt
.grid-example img
{
grid-column: image;
grid-row: image;
}
kurz
.grid-example img
{
grid-area: image;
}
LLAP 🖖
Oder geht es das Foto normal mit srcset in einen Div-Container zu packen und irgendwie obendrauf Texte/Buttons zu packen?
Mit CSS-Grid https://youtu.be/EashgVqboWo