CSS : Hintergrundbild

von **Griefshire** am 10.01.2012, 17:44

Moin zusammen.

Ich würd auf meiner Website gern ein Hintergrundbild einbauen, dieses Bild soll sich dann an der Browserfenster Größe anpassen, allerdings hab ich kein plan wie ich das hinkriegen soll. Hoffe mir kann da einer weiterhelfen.

mfg Griefshire

von **Guillermo** am 10.01.2012, 17:47

Hi Griefshire,

dazu gibt es hier einen sehr guten Artikel. Beschrieben sind die neuere einfachere CSS3 Variante wie auch verschiedene aeltere und kompatiblere CSS2 Varianten.

Viele Gruesse,
Guillermo

von **Griefshire** am 10.01.2012, 17:54

thx, werd ich mir direkt mal anschauen.

von **Griefshire** am 10.01.2012, 18:07

Ok, jetzt hab ich das Problem das er die Grafik über allem drüber packt, also egal ob ich Text reinschreibe oder nicht, die Grafik ist an vorderster stelle =(

Hab mich für die 2. Technik entschieden die beim Link gezeigt wird.

von **Guillermo** am 10.01.2012, 21:53

Wie sieht denn dein Quelltext aus?

von **Griefshire** am 10.01.2012, 21:55

index.php

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="bg"> <img src="images/bg.jpg" alt=""> <div id="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </div> </body> </html>

style.css

Code: Alles auswählen: html, body {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; color:#FFF; font-size:12px;} #bg {position:fixed; top:-50%; left:-50%; width:200%; height:200%;} #bg img {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Dabei ist ihm egal ob der DIV Content im DIV bg ist unter dadrunter, macht kein unterschied bei der ausgabe =(

von **Guillermo** am 10.01.2012, 22:40

Versuchs mal so wie in dem Beispiel, und weiß dem Bild die ID "bg" zu und nicht dem div das alles umschließt. Wenn das nicht hilft kannst du dir mittels des CSS Attributs "z-index" behelfen, damit kannst du die Anordnung der verschiedenen Elemente bestimmen (SELFHTML: z-index)

CSS : Hintergrundbild

CSS : Hintergrundbild

Re: CSS : Hintergrundbild

Re: CSS : Hintergrundbild

Re: CSS : Hintergrundbild

Re: CSS : Hintergrundbild

Re: CSS : Hintergrundbild

Re: CSS : Hintergrundbild

Wer ist online?