Zum Inhalt springen

Bild als Wasserzeichen und darüber Content?

Erstellt am 27. März 2006 · 25 Antworten · letzte Antwort am 24. Mai 2006 · Seite 1 von 2

Tags: Bilder, HTML & CSS, Frage

Moestchen ·

Hallo Leute,
bin nach wie vor noch dabei mich in Typo3 einzuarbeiten, komme zwar mittlerweile immer besser zu recht, aber habe immer noch so meine Probleme.

In meinem Template habe ich einen Bereich mit dem Marker ###INHALT### versehen. Ziel soll es sein, in diesem Bereich den Content der Webseite anzuzeigen, wobei im Hintergund als Wasserzeichen ein Logo zu sehen sein soll.

Das Bild und den Content in zwei verschiedenen Bereichen anzuzeigen ist ja kein Problem, aber wie bekomme ich das im selben Bereich mit Ebenen hin?

Habe es mit dem GIFBUILDER versucht, doch mit:

     INHALT = IMAGE
     INHALT.file = GIFBUILDER
     INHALT.file.XY = 560, 400
     INHALT.file {
         10 = IMAGE
         10.file = fileadmin/...

         20 = CONTENT
         20.table = tt_content
         20.select.orderBy = sorting 
     }

wird mir lediglich die Grafik angezeigt.
"Schnippel" ich das ganze wieder auseinander und packe es in zwei getrennte Bereiche, funktioniert es ohne Probleme.

Könnt ihr mir bitte weiterhelfen, was ich verkehrt mache!?

Vielen DANK und viele Grüße

toyde ·

weil ich wahrscheinlich nicht weiß wie es geht?

? wartest Du denn bis es sich selbst löst? o.O

1) Ich kenne CSS nicht: also:
http://www.google.de
Suchbegriffe "hintergrundbild css".
z.B.:

<div style="background-image: url(.../images/bg.jpg);">mein Content hat ein Hintergrundbild</div>

2) Wie bekomme ich Klassen in meinen Content
» gibt hier eine tolle Forumsuche.
Suchbegriffe "CSS Content Klassen".

Du versuchst es ja nicht mal - finde ich schade.. #paralyzed#

Moestchen ·

Danke für die Hinweise und eure Unterstützung!!!

Du versuchst es ja nicht mal - finde ich schade

@toyde:
Sorry, aber ich denke das du das wohl kaum beurteilen kannst.
Erstens sitze ich nicht erst seit 5 Minuten an dem Problem, sondern schon seit heute früh und zweitens habe ich schon mehr als genug gegoogelt. Nur wie gesagt, habe ich es in Bezug auf GIFBUILDER versucht und kam nicht auf die Idee mit CSS. Wie soll man nach was googeln, wenn man nicht weiß wonach?
Und sicherlich fällt es dir leichter, aber vergiss bitte nicht, das jeder - sicherlich auch du - mal klein angefangen hat ... und dies hier ist doch auch ein Anfängerforum.

Sorry an alle anderen, bitte nicht falsch verstehen, aber das musste mal sein. Nichts ärgert mich mehr in Forum, als solche pauschalen Äußerungen.
Denn ich denke ein Forum ist ein Quell des Wissens, wo jeder was lernen kann und nicht ein Ort zum sagen "du bist zu doof zu suchen".

Viele Grüße

toyde ·

Ich habe nix von 'zu doof' gesagt. Nur hatte Dir ja nugget wunderbar gesagt, dass man Hintergrundbilder/Wasserzeichen per CSS lösen kann.

Moestchen ·

Ich habe nix von 'zu doof' gesagt.

Hab ich ja auch nicht behauptet, deswegen steht es a) in Anführungszeichen und b) hätte ich sonst geschrieben, DU hast gesagt. ;-)

Also, bitte nicht persönlich nehmen - ist wirklich so nicht gemeint ... sondern es ist nur ein allgemeines Problem, welches mir in Verbindung mit Foren auffällt.

Viele Grüße

PS: Habs gerade mit CSS probiert uns es funzt leider nicht. 😢

toyde ·

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

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

Moestchen ·

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.

toyde ·

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

Moestchen ·

<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!?

Laures ·

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

Unbekannter Benutzer ·

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

Laures ·
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

toyde ·
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".

Laures ·

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

fuss ·

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

toyde ·

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