Frage Anordnung von background image, Bild und Text

[Fr3ddy]

Hi,

ich habe ein Frage bezüglich eines Banners.
Dieser Banner beinhaltet ein Hintergrundbild 1920x400px, welches fluid sein soll aber nur bis zur max. breite des Bildes.
Das zweite Bild ist quasi ein Themenbild, welches in einem Container zusammen mit einem Text mittig stehen soll, beides natürlich auch fluid.


Wie baue ich am besten das Grundgerüst auf, mache ich das Hintergrundbild wirklich als background-image oder als img tag?
Wie positioniere dann am besten die Inhalte, den absolut ist ja nicht so von Vorteil, wenn es fluid sein soll, oder?

LG & Danke

 

[Arne Drews]

Hallo,

Nutzt Du bootstrap o.ä.?
Dann solltest Du das als Bild und diese responsive machen, dann sollte das Problem gelöst sein.

Gruß Arne

 

[Fr3ddy]

Ja, nutze ich, ich dachte mir, da das Hintergrundbild meist die selbe größe hat, es als Hintergrundbild zu zentrieren.

so schauen momentan meine Breakpoints aus, dass das auch noch mit dem Themenbild und Text hinhaus:

@media (min-width: 768px) {
.jumbotron {
height: 247px;
}
}
@media (min-width: 992px) {
.jumbotron {
height: 322px;
}
}
@media (min-width: 1200px) {
.jumbotron {
height: 400px;
}
}

 

[Arne Drews]

Hallo,

Ein Hintergrundbild passt sich nicht automatisch der Fläche an.
Aus responsive Sicht würde ich das wie gesagt als <img machen.

Gruß Arne

 

[SpiceLab]

Ein Hintergrundbild passt sich nicht automatisch der Fläche an.

Veto: https://developer.mozilla.org/de/docs/Web/CSS/background-size

 

[Arne Drews]

Hallo,

Ja, dann viel Spaß mit der Frickel-Lösung.
Aus responsive Sicht macht das andere defintiv mehr Sinn, solltest Du auch wissen!

Wir reden von responsive und dann kommt so ein Link, der dem TE suggeriert, sein Problem damit sinnvoll lösen zu können?!

Gruß Arne

 

[SpiceLab]

Ja, dann viel Spaß mit der Frickel-Lösung.
Aus responsive Sicht macht das andere defintiv mehr Sinn, solltest Du auch wissen!

Ich will hier keine Diskussion starten, welche der beiden Möglichkeiten in diesem Fall sinnvoller ist, sondern lediglich Deine Aussage entkräftigen, dass sie so nicht stimmt!

 

[Fr3ddy]

Ok und wenn ich das als img einfüge, wie positioniere ich dann am besten das standart Div "container" über dem bild, so das es auch noch fluid ist?

 

[Arne Drews]

[...] sondern Deine Aussage entkräftigen, dass sie so nicht stimmt!

Mir ist klar, dass der einzige Sinn Deines Beitrages war.
Ich habe da auch nichts gegen, aber Du vergisst bei aller Mühe dabei, dass das dem TE kein Stück weiterhilft!

Also Frage: Willst Du dem TE helfen oder nur revidieren, was ich sage?

@Fr3ddy Mit position:absolute; und evtl. z-index, falls nötig.

Gruß Arne

 

[SpiceLab]

Ich habe da auch nichts gegen, aber Du vergisst bei aller Mühe dabei, dass das dem TE kein Stück weiterhilft!

Das ist einzig und allein Deine persönliche Meinung!

Aber Du wirst das Kind mit Deinen Ratschlägen schon schaukeln. Und ich bin hier wieder raus!

 

[Arne Drews]

Da von Dir ja keine sinnvollen kommen...

 

[SpiceLab]

Da von Dir ja keine sinnvollen kommen...

Auch das ist Deine persönliche Meinung wider besseren Wissens!

 

[Tronjer]

Wenn ich Bootstrap nehme und das Mockup aus dem Eingangspost zugrunde lege, habe ich im Hintergrund einen Container mit column-8 und offset-2. Das Hintergrundbild ließe sich zwar auch als background-image applizieren, allerdings macht das nicht wirklich Sinn, weil der darüber liegende Content ohnehin per negativem Margin nach oben verschoben werden muss. Dieser erhält ein .container-fluid und column-12. Bild 1 wird column-2, Bild-2 und der Text column-4.

 

[Fr3ddy]

Ich habe hier mal ein Beispiel, nur skaliert das große Bild nicht mit und wenn ich das Div "banner_content" absolut Positioniere, ist es doch acuh nicht responsiv, wie mache ich das dann?
https://jsfiddle.net/twma6wq4/1/

 

[Arne Drews]

Hallo,

Verwende Bootstrap, wie @Tronjer geschrieben hat.

Gruß Arne

 

[Tronjer]

Kein position:absolute. Nimm das Bootstrap Grid, wie oben beschrieben. Das Bild selber erhält eine width:100% und height:auto

 

[Fr3ddy]

Naja eine 100%ige einbindung von bootstrap habe ich leider bei meinem cms nicht.

 

[Tronjer]

Du brauchst doch nur das Stylesheet im Head einzubinden.

 

[Fr3ddy]

Dann muss ich ja noch die klassen, den divs zuweisen und das klappt nicht bei allen.

 

[Tronjer]

Het dein CMS denn kein Grid Layout?