CSS: Hintergrundbild mit spezieller Breite

Hallo!

Ich muss wieder mal bei euch nachfragen, weil ich grad keine Idee habe. Diesmal geht's um CSS und allenfalls eine schwierige Sache (vielleicht ist's ja auch ganz einfach und ich bin zu doof - wäre ja cool). Und zwar geht's darum, dass ich ein etwas spezielles Design umsetzen muss.

Der Content-Bereich der Seite soll 100% und maximal 1280 Pixel breit sein. In diesem Bereich drin gibt's eine Drei-Spalten-Aufteilung. Bis hierher kein Problem (Spalten mache ich über "Rocksolid Columns"). Nur wird aber gewünscht, dass der ganze Bereich dieses Absatzes eine Hintergrundfarbe hat. Auch das easy, ich pack' das Zeug in zwei Divs - der Äussere hat "width: 100%; background-color: red;", der Innere dann "width: 100%; max-width: 1280px; margin: 0 auto;". Alles Bestens. Jetzt aber kommt's: innen drin habe ich drei Spalten ("1-2"), eigentlich Content hat lediglich die linke Spalte. In der rechten 2/3 Spalte soll ein Hintergrundbild rein - und zwar bis zum äusseren rechten Rand der Seite. Zur Erklärung anbei das Bild.

Bild/Illustration: Anhang 19347

Ich habe im Moment keine Ahnung, wie ich das am besten umsetze. Weder grundsätzlich technisch, noch wie ich das danach so baue, dass es einfach von Redakteur gepflegt werden kann (Bild links oder rechts, Bild austauschen, verschiedene Hintergrundfarben, etc).

Also, ich bin für jeden Hinweis dankbar und probiere gerne alles aus. Vielen Dank bereits im Voraus für euren Input und eure Hilfe!

Gruss,
Peri

Das ist viel zu kompliziert anhand deiner Beschreibung. Zeige einen Link zu der Seite, eine statische Seite, ein Fiddle o.ä.

Auf dieser Seite https://demo.rocksolidthemes.com/contao/tao/columns würde sowas Ähnliches so gehen

PHP-Code:

---

.page {
  background-color: cornflowerblue;
}
.content-wrapper {
  background-color: white;
}
.-large-col-3-2 > div:nth-child(1) {
  background-color: tomato;
  margin-left: -50%;
} 


---

Devtools, Stilbearbeitung, neues Stil-Dokument, einfügen.

Hi Andreas

Zitat:

---

Zitat von Andreas

Das ist viel zu kompliziert anhand deiner Beschreibung. Zeige einen Link zu der Seite, eine statische Seite, ein Fiddle o.ä.

---

Ich werde schauen, dass ich ein Beispiel machen kann. Ich dachte allerdings, dass das angefügte Bild relativ klar zeigt, was gewünscht ist... Das Problem ist ja grad, dass ich nicht weiss, wie ich es umsetzen soll - auch unabhängig von Contao. Daher wird eine Beispiel-Seite relativ schwer.

Deinen Code-Tipp schaue ich mir gleich mal an. Vielen Dank.


Gruss,
Peri

Also ich verstehe die Problematik.

Frage dazu:

Soll die Höhe des Bildes variabel sein? Also skaliert es mit, wenn man den Browser verkleinert?

Mach einfach so weit, wie du kommst. Wrapper Hintergrundfarben, Spalten, Text und Bild. Dann kannst du z.B. sagen. Dieses Bild soll von hier bis dort reichen. Da wo jetzt rot ist soll gelb sein usw.

Ich verstehe sein Problem so:

Er möchte einen Inhaltsbereich haben, der eine maximale Breite hat und zentriert ist. Darin befindet sich links eine Spalte für Text und rechts daneben eine Spalte für ein Bild. Das Bild soll aber nicht bis zum rechten Rand des zentrierten Wrappers gehen, sondern, wenn das Browserfenster sehr groß ist, darüber hinaus bis zum rechten Browserrand.

Hallo Andreas

Hier jetzt mal angefügt der grafische Entwurf einer ganzen Seite.
Ich hoffe, ich konnte mit den Anmerkungen darin erklären, was gewünscht ist und wie's funktioniert. Aber eigentlich dürfte es auch ohne die Erklärung klar sein.

Wie gesagt, es sieht eigentlich total einfach aus, aber ich habe keine Ahnung, wie ich das umsetzen könnte... Ausser eventuell mit JavaScript. Allerdings würde ich eine CSS-Lösung bevorzugen.

Anhang 19351



Lieber Gruss
Peri

So ähnlich habe ich es auch verstanden, aber da war auch vieles wiedersprüchlich. Mein Beispiel aus #2 macht sowas.

Zitat:

---

Zitat von dazzle89

Er möchte einen Inhaltsbereich haben, der eine maximale Breite hat und zentriert ist. Darin befindet sich links eine Spalte für Text und rechts daneben eine Spalte für ein Bild. Das Bild soll aber nicht bis zum rechten Rand des zentrierten Wrappers gehen, sondern, wenn das Browserfenster sehr groß ist, darüber hinaus bis zum rechten Browserrand.

---

JA, genau... Sorry, wenn ich das nicht klar erklären konnte.

Ein Bild nützt nichts, weil es auf mein CSS nicht anspricht. Du möchtest also einen rot-halbtransparenten Overlay über deine Seite. Dann habe ich das doch falsch verstanden.

Sorry, aber du musst eine Seite zeigen, mit HTML und CSS.

Zitat:

---

Zitat von Andreas

PHP-Code:

---

.page {
  background-color: cornflowerblue;
}
.content-wrapper {
  background-color: white;
}
.-large-col-3-2 > div:nth-child(1) {
  background-color: tomato;
  margin-left: -50%;
} 


---

---

Wenn ich den Code richtig verstehe, dann ist das nicht genau die Lösung.
Wie gesagt, die Linke Spalte plus der Platz links davon bis zum Browserfenster in einer Farbe, die rechte Spalte plus bis zum Browserfenster mit einem Hintergrundbild.

Ich spiele grad mit übereinanderliegenden Divs rum, aber ich bringe die Platzierung nicht hin, denn die Breite ist ja dynamisch...

Ich denke das ist mit CSS nur machbar, wenn sich dieser Bereich NICHT innerhalb des roten Containers befindet (vom Markup her). Er müsste rausgenommen werden und es darf sich kein Wrapper herum befinden, der eine feste Breite hat. Du darfst also nicht mit EINEM einzelnen Wrapper arbeiten, der die gesamte Seite zentriert, sondern mit mehreren. Und der Bereich, um den es hier geht, muss sich dazwischen befinden. Ansonsten wüsste ich nicht, wie das responsive klappen sollte.

Hi Andreas

Zitat:

---

Zitat von Andreas

Ein Bild nützt nichts, weil es auf mein CSS nicht anspricht. Du möchtest also einen rot-halbtransparenten Overlay über deine Seite. Dann habe ich das doch falsch verstanden. Sorry, aber du musst eine Seite zeigen, mit HTML und CSS.

---

Nein, nein, nein. Der rote, semitransparente Overlay soll bloss illustrieren, wo die Grenzen der Seite sind, was also zum Inhalt gehört (in Contao normalerweise #wrapper) und was ausserhalb ist (also der Bereich, welcher sich bei grossen Bildschirmen vergrössert, denn der Wrapper hat ja eine Maximalbreite und ist auf der Seite zentriert). Der Overlay ist also wirklich nur für euch hier eine optische Erklärungshilfe.

Zitat:

---

Zitat von Perikomarilensko

Wenn ich den Code richtig verstehe, dann ist das nicht genau die Lösung.

---

Das Beispiel ist ja auch nur für rocksolid-columns im TAO Theme. Wenn du mir eine Seite zeigst, bekommst du bestimmt auch eine Lösung, aber ohne dein HTML und CSS wäre das wilde Spekulation.

@dazzle89, @Perikomarilensko: Ihr habt euch beide nicht meine Lösung angesehen. Sonst wüsstet ihr, wo es lang gehen könnte. Ich habe da im TAO kein HTML-Wrapper oder sonstiges hinzugefügt.

Edit: Sorry, da habe ich ja einen falschen Link reinkopiert, moment, ich füge mal den richtigen ein.

So, habe es oben korrigiert. Hier auch nochmal https://demo.rocksolidthemes.com/contao/tao/columns

Warum sagt denn keiner was? ;)

Ich habe mal eine wunderschöne Demo erstellt, wie man es machen könnte :D

https://jsfiddle.net/obg3ornc/

Header und Footer sind einzeln zentriert. Der Inhalt befindet sich dazwischen und geht über die gesamte Browserbreite. Text und das Bild müssten dann noch ausgerichtet werden.

Bekommt man das auch hin, wenn die beiden Inhaltsspalten innerhalb des Wrappers sind, der die feste Breite hat und zentriert ist? Die beiden Spalten sind ja breiter als der Wrapper und es muss auch responsive sein.

Hi 46dazzle89

Zitat:

---

Zitat von dazzle89

Ich denke das ist mit CSS nur machbar, wenn sich dieser Bereich NICHT innerhalb des roten Containers befindet (vom Markup her). Er müsste rausgenommen werden und es darf sich kein Wrapper herum befinden, der eine feste Breite hat. Du darfst also nicht mit EINEM einzelnen Wrapper arbeiten, der die gesamte Seite zentriert, sondern mit mehreren. Und der Bereich, um den es hier geht, muss sich dazwischen befinden. Ansonsten wüsste ich nicht, wie das responsive klappen sollte.

---

Da hast du natürlich recht. Ich habe das eigentlich bereits so konzipiert (ich dachte mir auch, dass es sonst sowieso nicht klappen würde). Bei meinem aktuellen Ansatz ist die ganze Seite 100% breit. dann habe ich um mein eigentliches Absatzelement ein Element vom Typ "HTML" gepackt und damit mehrere Div-Wrapper um das Absatzelement gemacht.

HTML-Code:

---

<div id="main">
  <div class="inside">             
    <div class="mod_article first last block" id="home"> 
      <div class="fullwidthcontainer brown">
        <div class="image"></div>
        <div class="inside">
          <div class="rs-columns ce_rs_columns_start">
            <div class="ce_rs_column_start  rs-column -large-col-3-1 -large-first -large-first-row -medium-col-3-1 -medium-first -medium-first-row -small-col-1-1 -small-first -small-last -small-first-row">
              <div class="ce_text block">
                <p>bla bla bla... Content</p>
              </div>
            </div>
          <div class="ce_rs_column_start  rs-column -large-col-3-2 -large-last -large-first-row -medium-col-3-2 -medium-last -medium-first-row -small-col-1-1 -small-first -small-last">
          </div>
        </div>
      </div>
    </div> 
  </div>
</div>

---

HTML-Code:

---

#main .fullwidthcontainer {
    position:relative;
}
#main .fullwidthcontainer > .inside,
#main .fullwidthcontainer > .image{
    width:100%;
    max-width:1280px;
    margin:0 auto;
}
#main .fullwidthcontainer.brown,
#main .fullwidthcontainer .rs-column {
    background-color:#d1c0c0;
}
#main .fullwidthcontainer > .image {
    width:70%;
    margin-left:30%;
    background-image:url("files/content/mood-images/beach.jpg");
    background-repeat:no-repeat;
    background-position: right center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

---

Ich weiss, das ist jetzt noch eine riesen Sauerei und ein Chaos, aber im Moment probiere ich einfach Sachen aus, nur um überprüfen zu können, ob eine Idee überhaupt funktionieren könnte. Bereinigen und sauber aufbauen würde ich es dann später schon.

Zitat:

---

Zitat von dazzle89

Ich habe mal eine wunderschöne Demo erstellt, wie man es machen könnte :D

https://jsfiddle.net/obg3ornc/

Header und Footer sind einzeln zentriert. Der Inhalt befindet sich dazwischen und geht über die gesamte Browserbreite. Text und das Bild müssten dann noch ausgerichtet werden.

Bekommt man das auch hin, wenn die beiden Inhaltsspalten innerhalb des Wrappers sind, der die feste Breite hat und zentriert ist? Die beiden Spalten sind ja breiter als der Wrapper und es muss auch responsive sein.

---

Super, vielen Dank!!
Dein Beispiel illustriert das Problem eigentlich ganz genau. Deine beiden Spalten (grün und orange) verhalten sich fast so, wie sie sollten. Aber eben wirklich nur fast. Denn ihre Breite orientiert sich an der Seitenbreite, was ja für Bildschirme > 1280 nicht korrekt ist. In deinem Beispiel müsste es so sein:

Spalte Grün = (30% der Breite ".wrapper") + 50% von (Seitenbreite - Breite ".wrapper") -> Hintergrund grün, padding-left: 50% von (Seitenbreite - Breite ".wrapper")
Spalte Orange: (70% der Breite ".wrapper") + 50% von (Seitenbreite - Breite ".wrapper") -> Hintergrundbild, padding-right: 50% von (Seitenbreite - Breite ".wrapper")

Wie gesagt, mit JS könnte man das wahrscheinlich umsetzen, aber das ist halt schon nicht optimal.

Genau, das Ausrichten vom Text wäre nun etwas tricky, damit es bündig zu den Inhalten vom Header, Footer und restlichen Layout ist. Da bräuchte man nun wohl irgendeine mathematische Formel, die vermutlich ganz simpel ist.... oder ich denke grad viel zu kompliziert.

Bei der Lösung von Andreas ist auf jeden Fall das Problem, dass es nicht wirklich responsiv ist. Wenn man den Browser verkleinert verschiebt sich der Text irgendwann links aus dem Bildschirm raus.

Hi Andreas

Zitat:

---

Zitat von Andreas

Auf dieser Seite https://demo.rocksolidthemes.com/contao/tao/columns würde sowas Ähnliches so gehen

PHP-Code:

---

.page {
  background-color: cornflowerblue;
}
.content-wrapper {
  background-color: white;
}
.-large-col-3-2 > div:nth-child(1) {
  background-color: tomato;
  margin-left: -50%;
} 


---

Devtools, Stilbearbeitung, neues Stil-Dokument, einfügen.

---

Habe das jetzt mal so gemacht, verhält sich aber nicht wie erhofft:

Anhang 19352

Habe das wirklich wie von dir vorgeschlagen gemacht.

Man könnte allenfalls mit Calc() und CSS-Variablen arbeiten. Aber gerade letzteres läuft in IE gar nicht und selbst in Edge 15 nur teilweise. Ist also auch kein gangbarer Weg.
Ich frage mich grad, ob das so eine krasse Anforderung ist oder ob ich im Moment einfach total auf dem Schlauch stehe und den Wald vor lauter Bäumen nicht sehe.

Ich denke das ist wirklich eine hohe Anforderung.

Letztendlich müsstest du wahrscheinlich das

Zitat:

---

Spalte Grün = (30% der Breite ".wrapper") + 50% von (Seitenbreite - Breite ".wrapper") -> Hintergrund grün, padding-left: 50% von (Seitenbreite - Breite ".wrapper")
Spalte Orange: (70% der Breite ".wrapper") + 50% von (Seitenbreite - Breite ".wrapper") -> Hintergrundbild, padding-right: 50% von (Seitenbreite - Breite ".wrapper")

---

oder sowas in der Art in eine calc-Rechnung umschreiben. Darin bin ich aber leider gar nicht gut.

Mit der calc-Funktion kommen so ziemlich alle Browser klar und ich wüsste nicht, wofür du da CSS-Variablen brauchst

Zitat:

---

Zitat von dazzle89

Mit der calc-Funktion kommen so ziemlich alle Browser klar und ich wüsste nicht, wofür du da CSS-Variablen brauchst

---

Naja, ich dachte, sobald ich auf Angaben anderer Elemente zugreifen möchte, brauche ich Variablen.

Mit einem Haufen dummen Markup und Flexboxen habe ich was gebastelt, was der Lösung ziemlich nahe kommt:
https://jsfiddle.net/cnhd1026/

Der blaue Hintergrund wäre das Hintergrundbild.

Scheinbar bleiben aber leider IE < 10 aussen vor...
http://caniuse.com/#search=flex

Bleibt aber noch Dein Problem, wie kann das der Redakteur händeln oder hatte ich es falsch verstanden, dass der Redakteur auch Hintergrundbilder auswechseln können sollte? Sind es nur ne Hand voll kann man das ja mit unterschiedlichen Klassen machen.

Zitat:

---

Zitat von Perikomarilensko

Scheinbar bleiben aber leider IE < 10 aussen vor...
http://caniuse.com/#search=flex

---

Schau Dir dafür mal die Marktanteile an. In Deutschland sind IE8 und IE9 zusammen nicht mal 0,5%, global sind es knapp drüber. Meine Kunden müssen mich sehr gut bezahlen wenn ich diese Browser unterstützen soll. Wenn es denn unbedingt sein soll, sollte man sehr gut überlegen wie man diese Browser unterstützt. Muss es dann da auch responsive sein?

Ich habe jetzt nicht alle Lösungsvorschläge von Anfang an gelesen. Wenn der Redakteur die Bilder ändern können soll arbeite ich persönlich lieber mit Bildern statt mit Hintergrundbildern. Obwohl es auch eine Erweiterung mit für Redakteure austauschbaren Hintergrundbildern gibt, wenn ich mich recht erinnere.
Ich habe mal eine Variante provisorisch gebaut http://forum-contao.ml-webseiten.de/...xt_layout.html, die mit dem Core und einer kleinen Templateänderung auskommen müsste. Der Redakteur müsste in der Lage sein, Klassen zu setzen.
Das Ganze funktioniert dann nicht mit Hintergrundbildern, sondern ganz normal mit dem Textelement. Einziger Wermutstropfen - so etwas funktioniert nur, wenn von vornerein klar ist was für Texte (maximale Textlänge) da in etwa verwendet werden sollen.

Nachtrag: Mit css-grid geht so etwas natürlich auch - vielleicht sogar noch besser. Da braucht man dann aber auf jeden Fall im Moment noch ein Fallback.

Edit: Link noch einmal geändert.

Zitat:

---

Zitat von mlweb

Ich habe jetzt nicht alle Lösungsvorschläge von Anfang an gelesen. Wenn der Redakteur die Bilder ändern können soll arbeite ich persönlich lieber mit Bildern statt mit Hintergrundbildern. Obwohl es auch eine Erweiterung mit für Redakteure austauschbaren Hintergrundbildern gibt, wenn ich mich recht erinnere.
Ich habe mal eine Variante provisorisch gebaut http://ml-webseiten.de/flexbox_image_text_layout.html, die mit dem Core und einer kleinen Templateänderung auskommen müsste. Der Redakteur müsste in der Lage sein, Klassen zu setzen.
Das Ganze funktioniert dann nicht mit Hintergrundbildern, sondern ganz normal mit dem Textelement. Einziger Wermutstropfen - so etwas funktioniert nur, wenn von vornerein klar ist was für Texte (maximale Textlänge) da in etwa verwendet werden sollen.

Nachtrag: Mit css-grid geht so etwas natürlich auch - vielleicht sogar noch besser. Da braucht man dann aber auf jeden Fall im Moment noch ein Fallback.

---

Hallo mlweb,

wenn der Redakteur Hintergrundbilder ändern können soll, mache ich das z.B. mit Rocksolid Custom Elements. Dort setze ich den Hintergrund einfach im Template als Inline-Style, indem ich dort die entsprechende Variable vom Bild ausgebe.

Das ist mein Problem - ich hasse inline-styles

Kann ich verstehen, aber ich denke, dass es keine andere dynamische Lösung gibt, wenn mit Hintergrundbildern gearbeitet werden muss. Das Vorbereiten von "unendlich" CSS-Klassen ist dann auch etwas umständlich.

Deine Lösung mit flexbox finde ich echt sehr gut, hoffentlich kann Perikomarilensko es so gebrauchen.

Klar muss man immer abschätzen, ob es notwendig ist bzw. wie wichtig es ist, das der Redakteur auch Hintergrundbilder austauscht. Rocksolid selbst arbeitet in den Themes z.B. auch mit diversen Inline-Styles, damit es für den "Laien" händelbar ist. Mehrere Klassen würde ich auch nur einsetzten wenn es sich um 2 oder 3 Varianten handelt.

Zitat:

---

Zitat von mlweb

Ich habe mal eine Variante provisorisch gebaut...

---

Das hast du schön gemacht. Aber ich denke es macht keinen Sinn, wenn man seine Seite nicht sieht. Z.B. würden in TAO da noch ganz andere Probleme auftauchen.

Zitat:

---

Zitat von mlweb

... ich hasse inline-styles

---

Zitat:

---

Zitat von dazzle89

...aber ich denke, dass es keine andere dynamische Lösung gibt, wenn mit Hintergrundbildern gearbeitet werden muss.

---

Es gibt noch eine schöne Lösung ohne inline Styles, die man auch mit jedem CE, welche ein Bild enthält umsetzen kann. Denn man kann das erforderliche "dynamische" CSS auch in den HEAD setzen.

Templateanpassung:

PHP-Code:

---

$GLOBALS['TL_HEAD'] = '
<!-- dynamic CSS from template ce_text-bg-img -->
.my-img {
  background-image: url('.$myImgPath.');
}
'; 


---

Hallo mlweb

Zitat:

---

Zitat von mlweb

Ich habe jetzt nicht alle Lösungsvorschläge von Anfang an gelesen. Wenn der Redakteur die Bilder ändern können soll arbeite ich persönlich lieber mit Bildern statt mit Hintergrundbildern. Obwohl es auch eine Erweiterung mit für Redakteure austauschbaren Hintergrundbildern gibt, wenn ich mich recht erinnere.
Ich habe mal eine Variante provisorisch gebaut http://forum-contao.ml-webseiten.de/...xt_layout.html, die mit dem Core und einer kleinen Templateänderung auskommen müsste. Der Redakteur müsste in der Lage sein, Klassen zu setzen.
Das Ganze funktioniert dann nicht mit Hintergrundbildern, sondern ganz normal mit dem Textelement. Einziger Wermutstropfen - so etwas funktioniert nur, wenn von vornerein klar ist was für Texte (maximale Textlänge) da in etwa verwendet werden sollen.

---

Vielen Dank! Das funktioniert ja und ist responsive! Ich bin begeistert.
Ich werde mir die Lösung heute gleich noch genauer anschauen und gucken, wie ich sie ins Projekt integrieren kann. Es gibt sicher eine Lösung, die auch für die Redakteure sinnvoll bedienbar bleibt.

Jedenfalls möchte ich insbesondere Dir, allerdings auch allen anderen Beteiligten herzlich für die Hilfe und die engagierte Diskussion danken!!!

Gruss,
Peri

Da meine Lösung ja auf das normale Textelement setzt, ist das für Redaktuere sicher bedienbar.

Sorry, ich hatte 'TL_HEAD' in meinem Vorschlag vergessen.

Hallo mlweb

Zitat:

---

Zitat von mlweb

Ich habe jetzt nicht alle Lösungsvorschläge von Anfang an gelesen. Wenn der Redakteur die Bilder ändern können soll arbeite ich persönlich lieber mit Bildern statt mit Hintergrundbildern. Obwohl es auch eine Erweiterung mit für Redakteure austauschbaren Hintergrundbildern gibt, wenn ich mich recht erinnere.
Ich habe mal eine Variante provisorisch gebaut http://forum-contao.ml-webseiten.de/...xt_layout.html, die mit dem Core und einer kleinen Templateänderung auskommen müsste. Der Redakteur müsste in der Lage sein, Klassen zu setzen.
Das Ganze funktioniert dann nicht mit Hintergrundbildern, sondern ganz normal mit dem Textelement. Einziger Wermutstropfen - so etwas funktioniert nur, wenn von vornerein klar ist was für Texte (maximale Textlänge) da in etwa verwendet werden sollen.

---

Ich habe Deinen Vorschlag fast 1:1 übernommen und das Ganze funktioniert einwandfrei und wirklich genau so, wie es sollte. Vielen herzlichen Dank für Deine Hilfe und Deinen Einsatz!!! Ich bin völlig happy und extrem dankbar.

Lieber Gruss,
Peri