Hallo liebe Kollegen, ich habe mal eine Frage... Ich habe in meinem Header ein Hintergrundbild, welches für die volle Seitenbreite optimiert ist. Siehe www.hufeisen-kontor.de Bei kleinerem Browserfenster bzw. Tablet wird der BG ja standardmäßig rechts "abgeschnitten"... Gibt es eine Möglichkeit, das Bild per CSS links abschneiden zu lassen, so dass mir praktisch das Kleeblatt rechts erhalten bleibt? Habe schon einiges probiert, leider ohne Erfolg... LG Patrick
abgesehen davon, dass ich bei Dir kein BG-Bild sehe, wäre ich eh schon weg, weil der Seitenaufbau viel zu lange dauert
Oh, ja die Seite braucht ja eine kleine Ewigkeit, bis sie geladen ist! Schade, denn sonst finde ich sie gelungen!
Du könntest versuchen den Background über background-position zu verschieben. Wichtig ist das du die Position mit der Auflösung verknüpfst. An der Ladegeschwindigkeit solltest du wirklich was machen.
Lädt die dermaßen lange bei Euch? Hmm...bei mir geht das recht fix, auch mit leerem Cache. Hatte neulich mal den Pagespeed gemessen und lag so bei 90 /100... Das Problem ist allerdings auch, dass die Seite noch bei 1&1 liegt...und das die nicht für Schnelligkeit bekannt sind... Werde im Winter mal umziehen! Danke Euch für den Hinweis!!! Mit background-position hatte ich schon rumgespielt, dann verschiebt sich allerding der ganze BG nach rechts oder links außen. Wie kann ich denn die Position mit der Auflösung verknüpfen Michael? Den BG hänge ich mal unten an, es geht praktisch um das Kleeblatt, welches auch beim Tablet neben dem extra dafür positionierten Warenkorb sein soll... Das Logo soll schon bleiben wie es ist Joschu.
Du kannst im CSS mit @media arbeiten würde dann beim Handy so in etwa aussehen: Code: @media (min-width:375px) and (max-width:700px) { #header.navbar .inside { background-position: 700px; } }
Okay... Und dann auf right ausrichten meinste??? Oder lässt sich für diese Auflösung auch ein eigener /in der Breite angepasster BG festlegen?
Du kannst für die unterschiedlichen Breakpoints, verschiedene Hintergrundbilder einfügen. Das sieht dann ungefähr so aus: Code: #header.navbar .inside { background-image: url('pfad/zu/deinem/smartphone/bild.jpg'); // Smartphone @media (min-width: $screen-sm-min) { background-image: url('pfad/zu/deinem/tablet/portrait/bild.jpg'); // Tablet Portrait } @media (min-width: $screen-md-min) { background-image: url('pfad/zu/deinem/tablet/landscape/bild.jpg'); // Tablet Landscape } @media (min-width: $screen-lg-min) { background-image: url('pfad/zu/deinem/desktop/bild.jpg'); // Desktop } } Damit kannst du dann dein Bild passend auf die jeweiligen Auflösungen anpassen, sodass das Kleeblatt immer im Sichtfeld bleibt
Habe 1&1 noch ne letzte Chance gegeben und in ein besseres Paket eingebucht...hoffe das die Performance nun etwas besser wird. An einige Bilder etc. muss ich allerdings noch ran, die sind als PNG-Files einfach "to big" Nochmals Dank an Euch und ein schönes WE!
Hallo Michael! Danke für den Link, hab ich gleich mal ausprobiert! Die PNG-Kompression ist super, den Jpg´s sieht man die Komprimierung aber deutlich an... Kurz noch zu 1&1 und dem neuen Paket "Unlimited Plus"...um es kurz zu machen....beschissen!!! Der Shop ist nun noch langsamer und der Pagespeed ist im Keller! (58/100)