Denksport: background-img über eigenes Syntax-Element

  • 5 Antworten
  • 2232 Aufrufe
*

Offline Rainer

  • Administrator
  • Mitglied
  • 710
Denksport: background-img über eigenes Syntax-Element
« 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 ->

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

*

Offline marusti

  • Administrator
  • Mitglied
  • 534
Re: Denksport: background-img über eigenes Syntax-Element
« Antwort #1 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%);
}

*

Offline Rainer

  • Administrator
  • Mitglied
  • 710
Re: Denksport: background-img über eigenes Syntax-Element
« Antwort #2 am: 18. Februar 2019, 13:23:19 »
Servus marusti,

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

*

Offline Rainer

  • Administrator
  • Mitglied
  • 710
Re: Denksport: background-img über eigenes Syntax-Element
« Antwort #3 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  :?:
moziloCMS bei Diaspora*
•• moziloCMS über Facebook bekannt machen
••• moziloCMS auf GitHub
•••• Nichts ist einfacher, als das, was uns fremd ist, zu verachten.
••••• Mein moziloCMS

*

Offline marusti

  • Administrator
  • Mitglied
  • 534
Re: Denksport: background-img über eigenes Syntax-Element
« Antwort #4 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>

*

Offline Rainer

  • Administrator
  • Mitglied
  • 710
Re: Denksport: background-img über eigenes Syntax-Element
« Antwort #5 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>
moziloCMS bei Diaspora*
•• moziloCMS über Facebook bekannt machen
••• moziloCMS auf GitHub
•••• Nichts ist einfacher, als das, was uns fremd ist, zu verachten.
••••• Mein moziloCMS