Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Denksport: background-img über eigenes Syntax-Element

Begonnen von Rainer, 17. Februar 2019, 09:54:15

« vorheriges - nächstes »

Rainer

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.

Code (Eigenes-Syntaxelement) Auswählen
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 ->

Das Ergebnis bleibt auf der Testseite für die Allgemeinheit zugänglich.
moziloCMS über Facebook bekannt machen
•• moziloCMS auf GitHub
••• Nichts ist einfacher, als das, was uns fremd ist, zu verachten.
•••• Mein moziloCMS

marusti

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%);
}


Rainer

Servus marusti,

herzlichen Dank, das werd ich natürlich versuchen. Rückmeldung folgt.
moziloCMS über Facebook bekannt machen
•• moziloCMS auf GitHub
••• Nichts ist einfacher, als das, was uns fremd ist, zu verachten.
•••• Mein moziloCMS

Rainer

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 &quot;background:background2.jpg&quot;" 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  :?:
moziloCMS über Facebook bekannt machen
•• moziloCMS auf GitHub
••• Nichts ist einfacher, als das, was uns fremd ist, zu verachten.
•••• Mein moziloCMS

marusti

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 &quot;background:background2.jpg&quot;" class="contentimage">
   <div class="centered">
       TEXT
   </div>
</div>

Rainer

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>
moziloCMS über Facebook bekannt machen
•• moziloCMS auf GitHub
••• Nichts ist einfacher, als das, was uns fremd ist, zu verachten.
•••• Mein moziloCMS