---
title: "Hintergrundbild einfügen"
url: "https://www.typo3.net/d/56999-hintergrundbild-einfuegen"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2007-01-30"
last_reply: "2007-02-01"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# Hintergrundbild einfügen

Allgemein · 3 Antworten · gestartet 2007-01-30

## Eröffnungsbeitrag

**gajoref** · 2007-01-30 · [Beitrag #1](https://www.typo3.net/d/56999-hintergrundbild-einfuegen/1)

Hallo,

Möchte gerne hinter meinem Contenttext ein hintergrundbild einfügen. Wie funktioniert das bitte? Mit css oder typo3script

**Hie mein Typo3 script**

page = PAGE
 page {
    # Allgemeine Seiteneigenschaften setzen
    bodyTag = <body>
    stylesheet = fileadmin/style2.css
    # MetaTags angeben
    meta.AUTHOR = Robert Meyer
    meta.DESCRIPTION = Hier steht eine Beschreibung

    # Die Designvorlage integrieren
    10 = TEMPLATE
    10.template = FILE
    10.template.file = fileadmin/vorlage2.html
    10.workOnSubpart = DOKUMENT

10.marks {
       # Den Platzhalter DATUM ansprechen
       DATUM = TEXT
       DATUM.data = date : d.m.Y

       # Das Logo einlesen
       LOGO = IMAGE
       LOGO.file = fileadmin/images/header_hs.jpg

       # Den Trailer dynamisch ansprechen
       TRAILER = IMAGE
       TRAILER.file = GIFBUILDER
       TRAILER.file {
          XY = 758, 0
          backColor = #FF0000

          # Das Hintergrundbild einlesen
          10 = IMAGE
          10.file.import = uploads/media/
          10.file.import.data = levelmedia:-1, slide
          10.file.import.listNum = 0
          10.file.width = 758
          10.offset = 0, -150

          # Den Verlauf einarbeiten
          20 = IMAGE
          20.file = GIFBUILDER
          20.file.backColor = #FFFFFF
          20.file.XY = 758,99
          20.mask = fileadmin/images/mask.jpg

# Text auf den Trailer rendern
          30 = TEXT
          30.text.field = subtitle // title
          30.fontFile = fileadmin/fonts/verdana.ttf
          30.fontSize = 24
          30.fontColor = #34497
          30.niceText = 1
          30.offset = 10, 85
       }

# Das Textmenü oben erstellen
       MENU_OBEN = HMENU
       MENU_OBEN {
          special = directory
          special.value = 197
          1 = TMENU
          1.NO = 1
          1.NO.linkWrap =  | | |*|  | | |*|  |
       }

# Das grafische Menü erstellen
       MENU_LINKS = HMENU
       MENU_LINKS {
          wrap = <img src="fileadmin/images/linie_weiss.gif" width="178" height="5" alt="" /><br />|
          special = directory
          special.value = 151
          entryLevel = 0
          1 = GMENU
          1.NO = 1
          1.NO {
             XY = 178, 34
             backColor = #DFE4E8

             # Text auf den Menüpunkt rendern
             10 = TEXT
             10.text.field = title
             10.fontColor = #000000
             10.fontFile = fileadmin/fonts/verdana.ttf
             10.fontSize = 12
             10.niceText = 0
             10.offset = 15, 16

             # Eine ggf. vorhandene zweite Textzeile anzeigen lassen
             15 < .10
             15.text.listNum = 1
             15.offset = 14, 32

# Hilfsebene zur Berechnung der Höhe von Menüpunkten
             16 < .10
             16.text.case = upper
             16.text.listNum = 1
             16.fontSize = 22
             16.offset = 1000,1000

# Eine weisse Linie erzeugen
             20 = IMAGE
             20.file = GIFBUILDER
             20.file {
                XY = 178,20
                backColor = #FFFFFF
             }
             20.offset = 0, 23

          }

          # Einen RollOver-Zustand beschreiben
          1.RO < .1.NO
          1.RO.backColor = #FF9734

          # Die zweite Ebene als Kopie der ersten Ebene beschreiben
          2 < .1
          2.NO {
             10.offset = 60, 16
             backColor = #FFFFFF
             10.fontColor = #000000
             10.fontSize = 9
             XY = 178, 20
          }
          2.RO < .2.NO
          2.RO.backColor = #FFFFFF

# Die dritte Ebene als Kopie der ersten Ebene beschreiben
          3 < .1
          3.NO {
             10.offset = 90,16
             backColor = #FFFFFF
             10.fontColor = #000000
             10.fontSize = 7
             XY = 178, 20
          }
          3.RO < .3.NO
          3.RO.backColor = #FFFFFF

# Die vierte Ebene als Kopie der ersten Ebene beschreiben
          4 < .1
          4.NO {
             10.offset = 120,16
             backColor = #FFFFFF
             10.fontColor = #000000
             10.fontSize = 7
             XY = 178, 20
          }
          4.RO < .4.NO
          4.RO.backColor = #FFFFFF

}
       # Klickpfad erstellen
 KLICKPFAD = HMENU
 KLICKPFAD {
   special = rootline
   special.range = 1|4
   1 = TMENU
   1.NO = 1
   1.NO.linkWrap = >| /

}

    #inhalt ausgeben
    INHALT = CONTENT
    INHALT {
    table = tt_content
    }

}

}

  # Seiteninhalt beschreiben
tt_content = COA
tt_content {
# Überschfrift ausgeben
10 = TEXT
10 {
	field = header
	wrap = <h1>|</h1>
	}
	#bodytext ausgeben
	20 = TEXT
	20 {
	field = bodytext
	wrap = <p>|</p>
}

}

temp.image = COA
temp.image {
	5 = HTML

**hier meine css datei**

h2,h3,h4,h5,h6,div,p,body,html,input,button {
	font: normal 12px Helvetica,Verdana,Arial
}

h1 {
	font: normal 14px Helvetica,Verdana,Arial;
	font-weight: bold;
}

img.block {
	display:block;
}

div, img {
  margin:0;
  padding:0;
  border:0;
}

div#container {
  width:938px;
  margin-left:auto;
  margin-right:auto;
  border:1px solid silver;
  background: url(file:///D|/PRAXISWISSEN_TYPO3_2AUFLAGE/QUELLCODE ZUM BUCH/BILDER_UND_DATEIEN/fileadmin/images/background.gif) center repeat-y;
}

div#header { background-color:white; }

/*-----------------------------------*/

div#links {
	float:left;
	width:179px;
	padding-top:37px;
	padding-bottom:10px;
	background-color:#FFFFFF;
}

div#head {
	font: normal 10px Helvetica,Verdana,Arial;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#FFFFFF;
	background-image: url(fileadmin/images/bild1.jpg);

}

div#center {
	margin-left:190px;
	width:490px;
	background-color:#FFFFFF;
	background-image: url(fileadmin/images/bild1.jpg);

}

}

div#right {
	width:215px;
	height:auto;
	float:right;
	text-align:left;
	padding-top:10px;
	background-color:#DFE4E8;
}

.float-left {
	float:left;
}

div#top {
  font: bold 10px Verdana,Arial;
  clear:both;
  background-color:#FFFFFF;
  text-align:right;
  color:#000000;
  fontColor:#000000;
  padding:5px;
  padding-right:10px;
}

div#top a {
   text-decoration: none;
   color:black;
   }

div#footer {
  clear:both;
  background-color:#FFFFFF;
  padding:10px;
}

**So sieht derzeit die site aus**

<http://www.hsmattersburg.at/HS/index.php?id=145>

BITTE HELFT MIR, VERZWEIFLE SCHON!!!! #angry#

## Antworten

### [#2](https://www.typo3.net/d/56999-hintergrundbild-einfuegen/2) · maik · 2007-01-30

CSS!

DIV Kontainer für den Inhalt und dann per css die Hintergrundgrafik einfügen.

### [#3](https://www.typo3.net/d/56999-hintergrundbild-einfuegen/3) · gajoref · 2007-01-30

DANKE MAIK HAT GEFUNKT

eine frage noch bitte

will beim grafischen menü die buttons als bilder einfügen, müssen auch dynamisch sein. Ist das möglich, wenn ja bitte wie!

DANKE SCHÖN

### [#4](https://www.typo3.net/d/56999-hintergrundbild-einfuegen/4) · karlchen · 2007-02-01

bei dem grafischen Menü suchst du glaube ich den Punkt GMENU
<https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Index.html>

dort findest du einige Infos dazu, wie du mit dem Gifbuilder  dynamsich bilder erzeugen kannst.

Karlchen

---

Quelle: „Hintergrundbild einfügen“, typo3.net, https://www.typo3.net/d/56999-hintergrundbild-einfuegen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.