Beim Versuch ein backround-img via eigenem Syntax-Element hin zu bekommen, komm ich nicht weiter. Daher bitte ich euch mir bei dieser Denksportaufgabe zu helfen.
background = <div class="background"style="background-image: url("{DESCRIPTION}");">{VALUE}</div>
Funktioniert so nicht.
Hintergrund zu diesem Ansatz ist:
mit diesem Syntax-Element sollen auf einer Seite mehrere Container mit jeweils eigenem Hintergrundbild möglich sein.
Das ganze soll dann ungefähr so aussehen -> (http://mozilocms.momann.com/background.html)
Das Ergebnis bleibt auf der Testseite für die Allgemeinheit zugänglich.
wenn ich es richtig verstanden habe, hab ich sowas in der Art mal für ein Projekt gemacht.
bildoverlay = <div class="bildoverlay">
<img src="{VALUE}" >
<div class="centered">{DESCRIPTION}</div>
</div>
und die CSS dazu zb (Werte entsprechend anpassen)
.bildoverlay {
position: relative;
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 3rem;
letter-spacing: .5px;
line-height: 1.135
}
.bildoverlay img {
width: 100%;
height: 250px;
object-fit: cover;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Servus marusti,
herzlichen Dank, das werd ich natürlich versuchen. Rückmeldung folgt.
Leider funktioniert es nicht so wie erhofft. Bei dem Code von dir kommt folgendes raus:
<div class="bildoverlay">
<img src="TEXT">
<div class="centered">
<img src="/kategorien/background/dateien/background2.jpg" alt="Bild "background:background2.jpg"" class="contentimage">
</div>
</div>
Der eigegebene Text wird als Grafik aufgerufen
<img src="TEXT">
Nach umschreiben für flexbox, siehe Code:
.background2 {
width: 400px;
height: 400px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
text-shadow: 5px 5px 10px white, -5px -5px 10px white;
}
Sieht es so aus wie auf dem zweiten Bild. Der Text bleibt natürlich auch hier = Bild :?:
Kann es sein das du die Werte verwechselt hast?
bildoverlay = <div class="bildoverlay">
<img src="{VALUE}" >
<div class="centered">{DESCRIPTION}</div>
</div>
Bei {VALUE} wählst du ein Bild aus, bei {DESCRIPTION} gibst du den Text ein. Das gibt dir dann
<div class="bildoverlay">
<img src="/kategorien/background/dateien/background2.jpg" alt="Bild "background:background2.jpg"" class="contentimage">
<div class="centered">
TEXT
</div>
</div>
Vertauscht ist nichts. Das ich im Gegensatz zu deiner Variante alles in einer Zeile habe dürfte nicht das Problem sein. Diverse Versuche, auch VALUE und DESCRIPTION tauschen bringen nichts. Kann aber alles nicht so weit weg sein vom gewünschten Erfolg. :D
bildoverlay = <div class="bildoverlay"><img src="{VALUE}"><div class="centered">{DESCRIPTION}</div></div>