Skalierbares Headerbild

[Patric]

Hallo,

ich versuche gerade mithilfe der Contao-Academy eine Demo Seite aufzubauen, mit eigenen Inhalten. Nun stehe ich vor dem Problem, dass mein Header Bild sehr seltsam positioniert wird wenn ich background-size:cover und position: center center einstelle. Hier der Link zur Seite http://testsite.rm.de1.cc.

Vielleicht erbarmt sich jemand von den Profis und kann mir einen Lösungsansatz geben

[Socki]

Hallo, inwiefern seltsam?

Wie soll es denn aussehen?
LG Socke

[Socki]

vl meinst du mit seltsam das "background-attachment: fixed;" nimm es mal raus und schau ob es jetzt *richtig* ist

[Patric]

Sorry für meine unpräzise Frage ich meine dass es so aussieht als ob das Bild "eingezoomt" wird.

[Socki]

http://www.css-wiki.com/css-eigensch...und-attachment

[Patric]

Danke für deine Hilfe, leider komme ich td nicht weiter.. Obwohl kein Zoom-Effekt gewollt oder vorhanden ist, ist nur ein bestimmter Ausschnitt des Bildes zu sehen..

[Socki]

Versuche mal:

.header-img {
background-image: url("../../files/Pics/header-bild.jpg");
background-attachment: fixed;
width: 100%;
height: 738px;
overflow: hidden;
margin-top: 20px;
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
}

und hier noch ein netter link
https://developer.mozilla.org/de/doc...ackground-size
LG Socke

[Patric]

Vielen Dank, background-size: 100% war es. Abend gerettet

[PaddySD]

100% sind manchmal ungünstig, ich würde eher mit "cover" oder "contain" arbeiten. Nur so als Ergänzung...

Wichtig ist nur der korrekte Aufruf:

background: url('bild.png') center center/contain no-repeat; 

[mlweb]

Obwohl kein Zoom-Effekt gewollt oder vorhanden ist, ist nur ein bestimmter Ausschnitt des Bildes zu sehen..

Bilder haben von Haus aus ein bestimmtes Seitenverhältnis. Möchtest Du keine verzerrten Bilder, aber dennoch eine 100%ig ausgefüllten Bereich (cover) z.B. header-img und zwar sowohl in der Breite als auch in der Höhe, dann liegt es in der Natur der Sache, dass es Beschnitt geben kann bzw. geben wird.
Kannst Du in einer Richtung auf das komplette ausfüllen verzichten, dann kannst Du contain verwenden. Das Bild wird dann so skaliert, dass es immer in einer Richtung zu 100% passt.
In der anderen Richtung wirst Du Weißraum haben.
Legst Du dagegen eine Richtung 100% fest und diese Seite verändert sich dann in der absoluten Breite bei unterschiedlichen viewports, dann kannst Du sowohl Beschnitt als auch Weißraum haben. In Deinem momentanen Entwurf ist die x-Ausdehnung des Hintergrundbildes mit 100% versehen und die y-Achse steht auf auto. Der Bereich in den das Hintergrundbild gelegt wird, hat eine feste Höhe von 738px. Damit produzierst Du bis zu einer Bildschirmbreite von ca. 1975px bei Deinem derzeit verwendeten Bild mehr oder weniger großen Weißraum. Danach wird das Bild brutal von unten abgeschnitten. Ausgesprochen unschön.

[Patric]

Vielen Dank für die Antworten. Was wäre dann Ihrer Meinung nach die Ideallösung für so einen Fall?

[mlweb]

Das kommt erst einmal grundsätzlich auf das konkrete Layout und die genutzten Bilder an.
Wie oben schon erwähnt sind in vielen Fällen im responsive Design cover oder contain das Mittel der Wahl, weil diese einfach flexibler reagieren können. Außerdem natürlich breakpoints, Wahl von Bildern, die eine Ausschnittsbildung vertragen (cover) etc. Eine pauschale Antwort gibt es m.E. nicht.
Ganz grundsätzlich verwende ich auch keine inhaltsleeren Container . Ich würde ein solches Layout also völlig anders aufbauen. Ich würde eventuell/wahrscheinlich auch das eigentliches Hintergrundbild und das Logo voneinder trennen. Das gibt mir viel mehr Spielraum im responsive Design. Aber da gehen Vorlieben/Arbeitsweisen sicher auseinander.

Vielleicht erbarmt sich jemand von den Profis und kann mir einen Lösungsansatz geben

Mit leichter Verwunderung nehme ich dann auf dem Websiteentwurf zur Kenntnis:

Leistungen -> Webdesign: Professionelle Erstellung von modernen Websites

[Patric]

Das kommt erst einmal grundsätzlich auf das konkrete Layout und die genutzten Bilder an.
Wie oben schon erwähnt sind in vielen Fällen im responsive Design cover oder contain das Mittel der Wahl, weil diese einfach flexibler reagieren können. Außerdem natürlich breakpoints, Wahl von Bildern, die eine Ausschnittsbildung vertragen (cover) etc. Eine pauschale Antwort gibt es m.E. nicht.
Ganz grundsätzlich verwende ich auch keine inhaltsleeren Container . Ich würde ein solches Layout also völlig anders aufbauen. Ich würde eventuell/wahrscheinlich auch das eigentliches Hintergrundbild und das Logo voneinder trennen. Das gibt mir viel mehr Spielraum im responsive Design. Aber da gehen Vorlieben/Arbeitsweisen sicher auseinander.



Mit leichter Verwunderung nehme ich dann auf dem Websiteentwurf zur Kenntnis:

Leistungen -> Webdesign: Professionelle Erstellung von modernen Websites

Es handelt sich hierbei lediglich um Demoinhalte, die mir im Rahmen meiner Ausbildung von meiner Firma vorgegeben wurden