Zum Inhalt springen

Bild als Hintergrund verwenden

Erstellt am 24. Juni 2013 · 4 Antworten · letzte Antwort am 27. Juni 2013

Tags: Bilder, HTML & CSS, Frage

narf ·

hallo zusammen,

ich bin ziemlich neu bei typo3 und versuche gerade, ein bild als hintergrund einzurichten.

das html-template, das ich benutze, hat den banner oben per CSS als hintergrund deklariert:
.header
[...]
background:url(../images/header.jpg) no-repeat;

ich möchte nun aber den banner manuell per typoscript eintragen, sodass ich auch auf die eigenschaften davon zugreifen kann.
wenn ich das mache, wird das bild nicht mehr als hintergrund eingerichtet, wodurch sich das layout verschiebt.

gibt es eine eigenschaft von IMAGE, das das bild als hintergrund einrichtet? oder eine andere vorgehensweise?

ich sage schonmal vielen dank vorab.

-narf

Julian.​Hofmann ·

Hallo.

IMAGE liefert immer das komplette img-Tag zu Bild mit. Was Du aber brauchst, ist ja "nur" den Pfad zum Bild, also die Resource:

temp.head.10 = IMG_RESOURCE
temp.head.10.stdWrap = <div style="background-image:url(|) no-repeat;">
temp.head.10.file {
    import =  uploads/media/
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
}

Viele Grüße
Julian

narf ·

hallo julian,

vielen dank für deine antwort.

bisher klappt das noch leider noch nicht. ich stell mich bestimmt auch blöd an 🙂

logo = IMG_RESOURCE
logo {
  #stdWrap = <td colspan="2" class="header" style="background-image:url(|) no-repeat;">
  stdWrap = <td style="background-image:url(|) no-repeat;">
  file {
    import =  fileadmin/template/images/header.jpg
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
 } 
(...)
page.10.marks.LOGO < logo

aber auch wenn ich das manuell ins html-template reinschreibe, funkioniert das noch nicht:

    <tr>
  <td colspan="2" class="header" style="background-image:url(images/header.jpg) no-repeat;"><div id="headertext">###HEADERTEXT###</div></td>
</tr>

und mein zweites problem ist dann eben, dass ich ja dann kein IMAGE-objekt habe, dem ich z.b. einen "altText" mitgeben könnte.

wär super, wenn du hier noch weiter wüsstest 🙂

viele grüße
narf

Julian.​Hofmann ·

Mein Schnipsel war etwas flexibler (und komplizierter)...

logo = IMG_RESOURCE
logo {
  #stdWrap = <td colspan="2" class="header" style="background-image:url(|) no-repeat;">
  stdWrap = <td style="background-image:url(|) no-repeat;">
  file =  fileadmin/template/images/header.jpg
  file.treatIdAsReference = 1
 } 
(...)
page.10.marks.LOGO < logo

In Deinem beispiel aus dem HTML-Template passt der Pfad nicht. Der muss von der aufgerufenen Seite ausgehen, nicht vom Tempalte:

style="background-image:url(/fileadmin/images/header.jpg) no-repeat;"

Wofür willst Du einen altText angeben? Wenn es wirklich ein Bild samt alternativem Text sein soll, dann müsste Dein HTML-Konstrukt das als IMG-Tag berücksichtigen (und z.B. über z-index in den Hintergrund schieben). Wenn es "nur" ein Hintergrundbild sein soll, dann gibt's dafür keinen altText, weil es eher eine Schmuck-/Layoutverschönerung ist, aber kein Inhalt.

narf ·

nochmals danke für deine antwort 🙂

also zuerst hat es gar nicht funktioniert. als ich dann etwas rumgespielt habe und aus
stdWrap =
ein
stdWrap.wrap = ..
gemacht habe, hat er zumindest den wrap korrekt gemacht

jetzt während des schreibens ist mir noch ein licht aufgegangen, warum es nicht funktioniert hat:
statt background-image im css zu schreiben heißt es nur "background" (ohne -image). jetzt funktioniert das soweit - vielen dank 🙂

wegen dem altText-attribut.. auch wenn es als background eingebunden wird, ist es tatsächlich das echte titelbild der webseite und sollte daher schon einen altText bekommen. das wurde im css wohl so gemacht, damit ein seitenname in textform über den banner gelegt werden kann. das geht sicher auch mit gifbuilder, aber bis ich das an die richtige stelle gelegt hab und die ganzen formatierungen aus dem css übernommen habe...