Bild hinter Text

[Marce31]

Und zwar ich möcht ein Text das in einem div ist, vor einem Bild machen.


und ich wollte mal wisen wie des geht ? :/


ich wäre Dankbar für eine Antwort

 

[der_gerrit]

Im Allgemeinen ganz einfach, kommt drauf an wie weit du schon mit der Materie HTML und CSS vertraut bist. Aber fangen wir mal ganz langsam an!

Wenn wir den Text vor einem Bild haben wollen, dann nehmen wir dafür ein Hintergrundbild. Das bedeutet, dass alles was in diesem div ist (sei es Text oder andere Bilder) vor dem Bild steht, da es ja ein Hintergrundbild ist. Im Code sieht das ganze so aus :

#dein-div {
background: url("hintergrundbild.jpg") top center no-repeat;
width: 200px;
height: 200px;
}

top = Positioniert das Bild am oberen Rand des divs (oder auch : bottom)
center = Positioniert das Bild in der Mitte des divs (oder left, oder right)
no-repeat = Das Bild wird nur einmal angezeigt, ansonsten
repeat-x = horizontal wiederholen
repeat-y = vertikal wiederholen

Und dann einfach ganz normales HTML

<div id="dein-div">
Dein Text hier rein.
</div>

Schönen Abend noch, Morgen is Wochenende!

 

[Imbericle]

background-image: Hintergrundbild: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets oder mit XHTML 2: XHTML 2.0 - XHTML Image Module sind die einfachsten Möglichkeiten.


MfG

 

[Marce31]

Im Allgemeinen ganz einfach, kommt drauf an wie weit du schon mit der Materie HTML und CSS vertraut bist. Aber fangen wir mal ganz langsam an!

Wenn wir den Text vor einem Bild haben wollen, dann nehmen wir dafür ein Hintergrundbild. Das bedeutet, dass alles was in diesem div ist (sei es Text oder andere Bilder) vor dem Bild steht, da es ja ein Hintergrundbild ist. Im Code sieht das ganze so aus :

#dein-div {
background: url("hintergrundbild.jpg") top center no-repeat;
width: 200px;
height: 200px;
}

top = Positioniert das Bild am oberen Rand des divs (oder auch : bottom)
center = Positioniert das Bild in der Mitte des divs (oder left, oder right)
no-repeat = Das Bild wird nur einmal angezeigt, ansonsten
repeat-x = horizontal wiederholen
repeat-y = vertikal wiederholen

Und dann einfach ganz normales HTML

<div id="dein-div">
Dein Text hier rein.
</div>

Schönen Abend noch, Morgen is Wochenende!

Vielen Danke Für die Antwort, hat ir weiter geholfen D

 

[der_gerrit]

Vielen Danke Für die Antwort, hat ir weiter geholfen D

Schön zu hören :)
Wenn du fertig bist, zeig doch mal was du gemacht hast.
Würde mich schon interessieren.