Diese Anzeige ist nur für
Nicht-Mitglieder sichtbar!

Jetzt kostenlos registrieren

CSS : Hintergrundbild

Fragen zum Thema HTML und CSS können hier gestellt werden

Moderatoren: Basti, Guillermo, Ingo

CSS : Hintergrundbild

Beitragvon 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
Griefshire
Mitglied
 
Beiträge: 28
Registriert: 30.11.2011, 14:11
Diese Anzeige ist nur für
Nicht-Mitglieder sichtbar!
 
Jetzt kostenlos registrieren

Re: CSS : Hintergrundbild

Beitragvon 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
Gebildet ist der, der weiß, wo er findet, was er nicht weiß.
Benutzeravatar
Guillermo
Moderator
 
Beiträge: 1093
Registriert: 01.10.2007, 18:18
Wohnort: Bayern

Re: CSS : Hintergrundbild

Beitragvon Griefshire am 10.01.2012, 17:54

thx, werd ich mir direkt mal anschauen.
Griefshire
Mitglied
 
Beiträge: 28
Registriert: 30.11.2011, 14:11

Re: CSS : Hintergrundbild

Beitragvon 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.
Griefshire
Mitglied
 
Beiträge: 28
Registriert: 30.11.2011, 14:11

Re: CSS : Hintergrundbild

Beitragvon Guillermo am 10.01.2012, 21:53

Wie sieht denn dein Quelltext aus?
Gebildet ist der, der weiß, wo er findet, was er nicht weiß.
Benutzeravatar
Guillermo
Moderator
 
Beiträge: 1093
Registriert: 01.10.2007, 18:18
Wohnort: Bayern

Re: CSS : Hintergrundbild

Beitragvon 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 =(
Griefshire
Mitglied
 
Beiträge: 28
Registriert: 30.11.2011, 14:11

Re: CSS : Hintergrundbild

Beitragvon 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)
Gebildet ist der, der weiß, wo er findet, was er nicht weiß.
Benutzeravatar
Guillermo
Moderator
 
Beiträge: 1093
Registriert: 01.10.2007, 18:18
Wohnort: Bayern


Zurück zu HTML/CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast