Zum Inhalt springen

Bilderwechsel im CSS mit background-image

Erstellt am 5. November 2005 · 5 Antworten · letzte Antwort am 2. Juli 2006

Tags: Frage

Fiberman ·

Hallo,

ich bin noch blutiger Anfänger und deshalb auf euere Hilfe angewiesen.

Mein Template besteht nur aus div's. Jetzt möchte ich in dem Contentbereich ein Hintergrundbild mit CSS einbinden. Dieses Hintergrundbild soll sich von Seite zu Seite unterscheiden.

Wie kann ich das umsetzen?

<div id="content">###CONTENT###</div>

kann ich auch Marker direkt im externen CSS code setzen?

background-image: url ('/filebase/images/bg/###bildname###')

danke

steffenk ·

TS ersetzt alle Marker, die im Arbeitsbereich liegen.
Dazu müsstest Du die CSS-Anweisung ins Template schreiben und innerhalb der ###document###-Marker.

Ich finde das aber keine gute Lösung, ich würde die verschiedenen Hintergründe in verschiedenen Klassen definieren und in den entsprechenden Seiten einfach die Klasse wechseln.

just2b ·
steffenK schrieb

Ich würde die verschiedenen Hintergründe in verschiedenen Klassen definieren und in den entsprechenden Seiten einfach die Klasse wechseln.

Oder was vielleicht besser ist: 1 Klasse verwenden und dann diese mit einem 2. CSS überschreiben ODER

Erweiterung rf_dynamiccss > This extension provides template developers the possibility to use central CSS stylessheet templates. CSS properties are definied in the TS Setup and rf_DynamicCSS parses the templates, fills in the properties and links the resulting CSS file to the HTML page.

lg georg

Fiberman ·
steffenK schrieb

TS ersetzt alle Marker, die im Arbeitsbereich liegen.

Dazu müsstest Du die CSS-Anweisung ins Template schreiben und innerhalb der ###document###-Marker.

Genau das ist ja mein Problem, wenn ich die CSS-Anweisungen ins Template nehm kann ich nicht mehr dynamisch deren Inhalt ändern.

steffenK schrieb

Hintergründe in verschiedenen Klassen definieren und in den entsprechenden Seiten einfach die Klasse wechseln.

wäre eine Übergangslösung!

[EDIT]
Ich hab das jetzt erstmal so umgesetzt. Falls jemand eine sauberere Lösung hat bitte posten!

Im HTML Template:
<div id="###KLASSESEITEEINS###">###CONTENT###</div>

im Roottemplate:

KLASSENSEITEEINS = TEXT
KLASSENSEITEEINS.value = {$klassenid}

im constant der jeweiligen Seite
klassenid = bgseite1

in der CSS:
#bgseite1 {
background-image: url('/images/bg/bildseite1.gif');
}
[/EDIT]
@just2b:

überschreibt die zweite Klasse denn die erste? Und wie kann ich das mit TS umsetzen?

Danke für die Antworten!

Php_Diver ·

hi,

ich versuche mich mal hier einzuklinken.
ich habe ein ähnliches problem.

auf meiner seite habe ich mehrere datensätze angelegt. nun möchte ich jedem datansatz eine andere hintergrundfarbe geben.

ist das möglich? wie gehe ich da am besten heran?

danke

Oliver Thiele ·

Vielleicht hilft dir auch noch die FAQ weiter:
/faq/dynamisches-css

Im TypoScript kann nun beliebiges CSS generiert werden. Für den Browser wird eine echte Textdatei simuliert. Es wäre so auch ein rekursives Auslesen des Seiten-Feldes "Dateien" mit der Funktion levelmedia möglich oder das Einbinden externer Textdateien.

mfg
Oliver Thiele