Text in vorhandenes Bild einblenden

kerni · 17. April 2020

Hallo,

in einem Bannerbild möchte ich zusätzlich Text einblenden (z.B. von links oder rechts reinschieben) , also nicht schon im Bild integriert.

Wenn ich den Text auch auf die Position lege erscheint beides nebeneinander. Ist das überhaupt möglich ? Weiß jemand wie es geht ?

Danke Wolfgang

JoomlaWunder · 17. April 2020

Eventuell das Bannerbild einfach als Hintergrundbild einstellen.

Ein Link zur Seite könnte weitere Möglichkeiten eröffnen....

christine2 · 17. April 2020

Hallo Wolfgang,

eventuell damit: https://www.w3schools.com/howt…s_image_overlay_slide.asp

Edit: Achso, dann ist der Kopf weg Vielleicht gibt's dort was Ähnliches ....

https://www.w3schools.com/howt…s_image_overlay_title.asp

Liebe Grüße
Christine

kerni · 17. April 2020

Hallo ,

Hintergrundbild funktioniert prinzipiell.

Wie kann ich die Größe des Hintergrundbildes exakt der Größe des Banners anpassen ?

Leider erscheint bei mir nur ein schmaler Streifen des Bannerbildes, wahrscheinlich vom Template abhängig, habe die Stelle noch nicht gefunden.

Die Sache mit dem overlay_slide muss ich erst mal studieren !

LG Wolfgang

LukasHH · 17. April 2020

Das müsstest Du in der Klasse container hier anpassen können, wie z.B.

Code

.container {
    position: relative;
    max-height: 150px;
    overflow: hidden;
    width: 100%;
}

Habe hier ein Bild welches größer als das Banner ist, aber als Banner dargestellt werden soll. Durch die responsive Darstellung wird es bei schmalen Ansichten (z.B. Smartphone) in normaler Größe dargestellt.

https://jsfiddle.net/LukasHH/1kfc8ogx/

kerni · 18. April 2020

Es bleibt stets das Problem, dass das Background-Bild nur einen vergößerten Ausschnitt des Originalbildes darstellt.

Das muss man doch irgendwo anpassen können ?

Gruß Wolfgang

Indigo66 · 18. April 2020

kerni mache es per CSS über background-size: contain oder background-size: cover. Mit einem Link zum Problem könnten wir effektiver helfen.

LukasHH · 18. April 2020

Ja, du kannst über die Klassen container und image die Größe fest einstellen, aber dann ist es nicht mehr responsive, bzw. wird bei kleineren Auflösungen auch immer weiter verkleinert.

kerni · 18. April 2020

Danke werde morgen früh noch mal testen. Ich muss ja die entsprechende css-Stelle im Template finden, damit ich es dann im custom.css wie von Euch gesagt anpassen kann.

Template ist von JP, "School".

Habe die Seite frei geschaltet. Es ist aber alles noch in der Testphase. "genzkow.org".

Oben das Bild soll der Hinterbrund werden und der Text "Dorfverein Genzkow" von rechts oder links reinfahren (welches kein Problem darstellt).

Habe schnell doch noch den Hintergrund und die Schrift eingefügt. Bitte nicht über die Schrift selbst wundern, alles ist Test.

Problem erst einmal gelöst, bei musste ich .uk-cover-background anpassen !

Danke

Tags