moziloCMS Supportforum

moziloCMS => Wie kann ich...? => Thema gestartet von: Rainer am 17. Februar 2019, 09:54:15

Titel: Denksport: background-img über eigenes Syntax-Element
Beitrag von: Rainer am 17. Februar 2019, 09:54:15
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 -> (http://mozilocms.momann.com/background.html)

Das Ergebnis bleibt auf der Testseite für die Allgemeinheit zugänglich.
Titel: Re: Denksport: background-img über eigenes Syntax-Element
Beitrag von: marusti am 18. Februar 2019, 12:05:24
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%);
}

Titel: Re: Denksport: background-img über eigenes Syntax-Element
Beitrag von: Rainer am 18. Februar 2019, 13:23:19
Servus marusti,

herzlichen Dank, das werd ich natürlich versuchen. Rückmeldung folgt.
Titel: Re: Denksport: background-img über eigenes Syntax-Element
Beitrag von: Rainer am 19. Februar 2019, 08:52:04
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  :?:
Titel: Re: Denksport: background-img über eigenes Syntax-Element
Beitrag von: marusti am 19. Februar 2019, 09:35:25
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>
Titel: Re: Denksport: background-img über eigenes Syntax-Element
Beitrag von: Rainer am 19. Februar 2019, 19:32:37
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>