Bild als Wasserzeichen und darüber Content?

Kein Ding. Kritik ist bei mir nie böse gemeint 😉

Was hast Du genau versucht mit CSS? Poste bitte mal Quellcode bzw. TypoScript.

Okay, dann ist ja alles geklärt. :-)

Habe mir einfach erst einmal eine leere HTML-Seite erstellt um das CSS-Code-Schnipsel auszuprobieren:

<html>
  <body>
    <div style="background-image:url(Logo-2006-03-27_2.gif);">
      TEST
    </div>
  </body>
</html>

Das Bild liegt selbstverständlich im selben Verzeichnis.

Als Ergebnis sehe ich aber nur eine weiße Seite mit dem Wort TEST.

Und so?

<html>
  <body>
    <div style="background-image:url(Logo-2006-03-27_2.gif); height:600px;">
      TEST
    </div>
  </body>
</html>

<div>test</div> ist ein einziliges Div. Wenn dein Hintergrundbild erst weiter unten zu sehen ist, dann sieht man es nicht :p

Das hat wie Du siehst nix mit TYPO zu tun.
Hier der Link zu selfhtml, welches oben erwähnt wurde: http://de.selfhtml.org/css/eigenschaften/index.htm

<div>test</div> ist ein einziliges Div

Da hst du wohl recht, #angry# , habs in meiner Testseite noch einmal probiert, indem ich mehrere Probezeilen eingefügt habe - klappt.

Aber in meinem Template funktioniert es nicht, obwohl mehrzeiliger Content ausgegeben wird.
ERGÄNZUNG: Lokal wird mir in der Vorschau jetzt die Grafik als Hintergrundbild und darüber Text angezeigt, nur wenn ich das Template und das Bild auf den Server kopiere, wird mir beim Seitenaufruf nur der Content und kein Logo mehr angezeigt. 😢

Mal noch eine andere Frage:
War denn mein Ansatz mit GIFBUILDER so verkehrt? - Weil ich dachte, das man da einfach mit mehreren Ebenen arbeiten kann!?

erklärung
die seite die dein nutzer aufruft liegt immer im verzeichnisbaum genau ÜBER fileadmin. alle links die du im template setzt müssen also von diesem verzeichnis ausgehn. Davon ausgehend das dein bild direkt in fileadmin liegt muss es also heißen:

<html>
  <body>
    <div style="background-image:url(fileadmin/Logo-2006-03-27_2.gif);">
      TEST
    </div>
  </body>
</html>

und siehe da, es funzt im template.

zum gifbuilder:
da die erstellten images mit dem <img src=...> tag eingebunden werden ist es relativ komplex das teil als hintergrund einzufügen. wenn es zusätzlich immer das selbe bild ist, ist es unnötige arbeit für den server.

Laures

ein GIFBUILDER Bild kann man relativ einfach auch als Hintergrundbild einbinden das ist kein Problem, aber bei der Methode Hintergrundbild + Content mit GIFBUILDER erzeugen wird der _gesamte_ Inhalt als Bild ausgegeben. Könntest also auch einfach Deinen Entwurf nehmen, als jpg speichern und online stellen dann sparst Du Dir die ganze Typo3 Implementierung ;-)

Viele Grüße
Niki

Niki schrieb

ein GIFBUILDER Bild kann man relativ einfach auch als Hintergrundbild einbinden das ist kein Problem ...

WIE? Die möglichkeit will ich wissen, weil es einige fälle gibt wo ich dynamische hintergründe am ende gelassen hab.

ich kenne keine möglichkeit das image tag zu entfernen. damit fällt das einbinden über background-image schonmal flach. nächste möglichkeit währe der z-index. und das währe relativ schwierig.

Wie geht das einfacher?

In freudiger Erwartung,

Laures

Laures schrieb

ich kenne keine möglichkeit das image tag zu entfernen.

Wie geht das einfacher?

GIFBUILDER hat ja nix mit IMG-Tag zu tun.

Forumsuche links oben. Suchbegriffe "gifbuilder background-image".

Suchergebnis: 2 seiten an Forenbeiträgen. keine lösung.
kann ich einen Marker direkt durch ein Gifbuilder objekt ersetzen?

Olla!

Um das ganze (hoffentlich) zum Abschluss zu bringen: 😉

So liest man ein Bild aus dem Media Feld beim Seitentyp "advanced" aus, und bindet dieses per CSS dynamisch (als Hintergrund) ein:

# background content
# NO subpart - just a marker!
temp.bgcntgfx = TEXT
temp.bgcntgfx {
 data = levelmedia: -1, "slide"
 field.listNum = 0
 ifEmpty = bg_cnt.jpg
 wrap = background-image: url(uploads/media/|);
}

Irgendwo im HTML-Template:

<div id="contentcontainer" style="###BGCNTGFX###">...</div>

ifEmpty gib an, welches Bild benutzt werden soll, wenn kleins gefunden wird.

Wenn man nun ein dynamisch vom gifbuilder erzeugtes Bild einbinden will, muss der Typ vom gifbuilder anstelle von IMAGE IMG_RESOURCE sein:

temp.gifbuilder = IMG_RESOURCE

Nun kommt man an den Pfad des Bildes ran, und kann diesen per Marker einbinden.

Zum Thema levelmedia slide und weiterführende Info zu IMG_RESOURCE bitte tsref konsultieren. 😉

gruss, fuss

Da bleibt mir nichts mehr hinzuzufügen :-)

Tja, fehlt nur noch Moestchen der per CSS das Bild nun drin hat oder nicht ... *Fragezeichen*. Ist ja sein Thread 😉 .

Sorry das ich mich erst heute melde, hatte gestern leider keine Zeit vorbei zu schauen.

... und was soll ich euch sagen, ja, es funktioniert jetzt mit der CSS-Methode. Mein Fehler war, das ich den Pfad nicht vom Ordner fileadmin aus aufgebaut hatte, von daher konnte das Bild auch nicht gefunden werden.

Recht herzlichen Dank für eure Hilfe!!!

Viele Grüße

Hallihallo zusammen,

ich stöbere nunmehr seit fast zwei Monaten hier als stille Teilnehmerin durchs Forum und habe dadurch schon die Lösung für viele meiner kleinen Anfängerproblemchen gefunden.

Mit DIESEM Thread hier habe ich außerdem mit dem Beitrag von "fuss" die Lösung für genau das gefunden, was ich gerade brauche: Bilder, die ich über "advanced" einer Seite per upload/media zuweise, über CSS dann als background-image im Kopf der jeweiligen Seite auszugeben. Soweit so Klasse.

Warum schreibe ich dann hier? Weil es leider bei mir nicht funktioniert #angry# bzw ich nicht weiß, wie ich den Marker genau ansprechen muss. Zum Glück sind wir hier in den Anfängerfragen...

Wie genau muss ich denn den zugehörigen Marker ansprechen? Nach dem Code von "fuss" muss ich ja auf jeden Fall folgendes schreiben:

  temp.kopf = TEXT      
      temp.kopf {
        data = levelmedia: -1, "slide"
        field.listNum = 0
        ifEmpty = fileadmin/images/kopf1.jpg
        wrap = background-image: url(uploads/media/|);
        }

Den Marker KOPF, der ja im HTML mit <div id="kopf" style="###KOPF###"> definiert ist, muss ich ja aber noch ansprechen, denn sonst funktioniert es nicht, denn er bleibt im Quelltext stehen. Was mach ich da nun genau hin? KOPF=TEXT? Damit spricht er zwar den Marker an (im Quelltext steht dann <div id="kopf" style="">), er schreibt aber nicht in die "" ""rein, was er soll, nämlich das "background-image: url..." Was also muss ich KOPF= zuweisen?

Wahrscheinlich seh ich den Wald vor lauter Bäumen nicht und bin jemanden mit einer Axt dann sehr dankbar... #paralyzed#

LG, Sarah

Hallo Sarah,

zuerst mal herzlich willkommen im Forum!
Es wär geschickter du würdest einen eigenen Thread aufmachen, aber egal

marks.KOPF < temp.kopf

lg georg

Hallo Georg,

ja, den Gedanken an einen neuen Thread hatte ich auch - als ich gesehen habe, dass dieser ja schon den grünen Haken hat... In anderen Foren wird man wiederum für neue Threads ja virtuell geschlagen, wenn es welche zum selben Thema gibt... ;-)

marks.KOPF < temp.kopf bzw. in meinem Fall KOPF < temp.kopf weil ich 10.marks außen stehen habe, geht nicht - damit spricht er den Marker nicht mehr an - er bleibt im Quelltext stehen mit style="###KOPF###". Hm... Jetzt sieht es so aus:

10.marks {
      #vorher allerlei andere Marker zugewiesen
      KOPF < temp.kopf
      temp.kopf = TEXT      
      temp.kopf {
        data = levelmedia: -1, "slide"
        field.listNum = 0
        ifEmpty = fileadmin/images/kopf1.jpg
        wrap = background-image: url(uploads/media/|);
        }
      #nachher allerlei andere Marker zugewiesen
    }

entweder du hast das temp-Objekt irgendwo, zB ganz am ende/beginn des setups stehen und weist es dann zu oder du schreibst gleich
marks.KOPF {
data...
...
}

hoffe ich bisschen zur erleutung beigetragen
lg georg

Ja! Danke! Jetzt klappt es! Gestern Abend saß ich völlig auf der Leitung, aber heute hab ich es dann gleich hinbekommen. 🙂