Größe des Hintergrundbildes dem Browser anpassen
...da gibt es eine CSS-Lösung für. kann ich aber erst heute Abend erklären.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Leider hat Jimdo die Background-Images/Slider Funktion beschnitten und bietet für alle Webseiten nur noch eine Einstellung an: FullSize (background-size: cover;). Auch die Position konnte man früher einstellen. Jetzt nicht mehr. Die ist jetzt immer "center"
Der Trick ist, die Größe des Hintergrundbilds und seine Position trotzdem "festzunageln". Das geht mit einem CSS-Hack: die Größe mit background-size (Originalgröße in px), die Position mit background-attachment und background-position.
Beispiel:
Bei http://jetzt-buchen.jimdo.com/ haben wir das mit folgendem CSS-Hack gemacht:
2
3
4
5
6
.body, div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li {
background-attachment: fixed;
background-position: top left;
background-size: 1920px auto;
background-repeat: no-repeat;
}
1. Nachteil dieser Methode: wenn die Höhe der Seite die des Bildes überschreitet und das Bild am oberen Rand "festgenagelt" ist, gibt es einen abrupten "Abriss" am unteren Rand des Bildes. Den müssen wir auf der Beispielseite auch noch kaschieren:
...ich werde also den Fotografen bitten, mir die Bilder noch ein bisschen nach zu bearbeiten, so dass sie nach unten mit einem Farbverlauf nach transparent auslaufen. Oder ich packe noch einen Gradienten-Farbverlauf in Richtung Hintergrundfarbe drüber, das müsste auch funzen.
2. Nachteil: ein so "festgenageltes" BG-Image oder Slider ist nicht mehr responsiv, d.h., er passt sich der Browserfenstergröße nicht an.
Auf http://redesign-safari4.jimdo.com/ habe ich den Bildern deshalb eine variable Breite gegeben (width:100%)
Problem: die Höhe bzw. der Abstand des Contents muss dann dem Seitenverhältnis der Bilder folgen. Wird die Bildbreite verringert mit einem schmaleren Browserfenster, muss der obere Rand des Content-Bereiches sich automatisch daran anpassen.
Das hab ich auf der Safari-Testseite folgendermaßen realisiert:
2
3
4
5
6
7
8
#heading {
position: absolute;
top: calc(100vw * 0.43); /* 100vw = width:100% * 0.43 = Seitenverhältnis der Bilder h/b */
}
#cc-inner #tpl-content {
margin-top: calc((100vw * 0.43) - 75px);
z-index: 1;
}
LG, az
PS: bei anderen Designs können andere CSS-Bezeichner für das Bild bzw. den BG-Slider zuständig sein.
PPS: http://www.intensivstation.ch/css3/background-size/ für mehr Infos
PPPS: Gajohle Bilder auf http://www.fineartdrumscanning.de/ !!
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...bei der Webseite hab ich aus o.g. Grund jetzt doch einfach die Jimdo Standard-Einstellungen benutzt.
Diese Lösung hatte ich erst einmal nur aus Verlegenheit genommen, weil ich so schnell keine geeigneten Überarbeitungen für die Bilder bekommen hab. Jimdo scheint aber inzwischen nachgebessert zu haben, daher ist das Ergebnis auch so zufriedenstellend.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...versuch mal ein Bild mit höherer Auflösung und größeren Abmessungen und spiel mal mit folgenden Werten im CSS:
2
3
4
5
body.jqbga-container.jqbga-web--image {
background-attachment: fixed;
background-size: cover; /*contain, 100%, auto*/
background-position: center center; /*top, left*/
}
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hallo @MoniB,
...schmeiß mal alles raus, was Du im Head-Bereich stehen hast, und versuche folgenden Code stattdessen:
2
3
4
5
6
7
8
9
<style>
body.jqbga-container.jqbga-web--image {
background-repeat:no-repeat;
background-attachment: fixed;
background-size: contain;
background-size: 100vw auto;
background-position: center 0;
}
</style>
Und lade ein größeres Bild hoch, Abmessungen mind. 1200x450px.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
#14
gleiches Design? dann ja... sonst vielleicht...
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
#16
Hallo Ulli @DerPodenco,
...das Design von http://jetzt-buchen.jimdo.com/ ist Chicago, der Code passt aber auch au Miami. Ich habe es auf meiner Miami-Testseite (http://miami-designtest.jimdo.com/) genauso gemacht:
2
3
4
5
6
7
8
9
10
11
12
body.jqbga-container.jqbga-web--image {
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100vw auto;
background-position: center 0;
}
.jtpl-header {
padding-top: 450px !important;
padding-top: calc(100vw * 0.33) !important;
}
Für Dich dürfte noch der Eintrag ".jtpl-header" wichtig sein:
Die 100vw bedeuten 100% der aktuellen Fensterbreite. Der Faktor 0.33 ergibt sich aus dem Verhältnis Höhe/Breite Deines schmalsten Hintergrundbildes bzw. des Ausschnittes, den Du aus Deinem HG-Bild zeigen möchtest.
Bei meiner Beispielseite ist das Verhältnis 0.66 für das ganze Bild - ich will aber nur einen Ausschnitt des Bildes sehen - deshalb habe ich 0.33 gewählt und diese dem padding-top des Headers zugeschlagen. Pi x Daumen sozusagen, denn der Page-Title kommt auch noch dazu. Aber ich bekomme immer den mittleren Teil des Bildes als Ausschnitt durch mein "background-position: center 0;" zu sehen:
...das klappt bai den meisten Browserfenstern - einzig beim iPhone6 und 6Plus musste ich noch etwas machen, hier wird der Bildausschnitt im Querformat unschön. Deshalb habe ich über eine @media-Query für "Landscape" (=Querformat) eine andere Einstellung gewählt.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...was für ein Unterschied! Gratulation! Aber warum willst Du den Abstand nicht mit einem Abstand machen? Du meinst Doch den hier, oder?
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hallo @Nico
...wie ist denn Deine URL?
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
