[CSS] Hintergrund unten will nicht

[Wyveres]

es geht um die schatten links und rechts oder?

[Benny-one]

Ja, das ist eine Grafik.
Lösung muss valide sein und in IE6, IE7, FF und Opera laufen.

[Wyveres]

Original geschrieben von Benny-one
Ja, das ist eine Grafik.
Lösung muss valide sein und in IE6, IE7, FF und Opera laufen.

gut ich hab jetzt eine einfache Grafik verwendet x)

http://ddc-forever.de/bg.html

also folgenden code fürs Style.

body 
{
background-color:gray;
margin:0;
padding:0;
}
.background_div
{
position:relative;
background-image:url("image/hg.jpg");
background-repeat:repeat-y;
width:80%;
top:0px;
left:10%;
bottom:0px;       
}
.inhalt
{
height:1000px;
}

und das ist der beispiel HTMl code in XHTML 1.0 Strict.

<div class="background_div">
    <div class="inhalt">

    </div>
</div>

habs gerade im Opera 9.21, IE 6.0 (7.0 komm ich gerade nicht dran) und FF 2.0.0.9 getestet. x) bis auf das das verwendete Image gerade ein 800px mal 10px jpg ist. und mein Opera irgendwie renderbugs hat funktioniert es ... x)

[Benny-one]

Ähm, mach mal bitte so, dass .inhalt keine fest höhe hat und dann einmal mit ein bisschen Text und einmal mit so viel Text, dass gescrollt werden muss. Danke

[Kropff]

sag mal, was macht ihr da? wenn ihr ein hintergrundbild vertikal kacheln wollt und das dynamisch zur höhe des inhalts, dann geschieht das bei body. oder habe ich was falsch verstanden?

gruß
peter

[Wyveres]

Hmm ok x) mit zwei elementen geht es nicht vorallem wenn man nur ein Div für den schatten benutzt. wenn man aber ein ganz klein wenig schummelt x) ja schummeln muss man abundzu kann man folgendes verwenden.

body 
{
background-color:gray;
margin:0;
padding:0;
overflow:auto; 
}
.background_div
{
z-index:10;
position:absolute;
background-image:url("image/hg.jpg");
background-repeat:repeat-y;
width:80%;
left:10%;
top:0px;       
}
.background_div_2
{
z-index:1;
position:absolute;
background-image:url("image/hg.jpg");
background-repeat:repeat-y;
width:80%;
height:1000px;
left:10%;
bottom:0px;       
}
.inhalt
{
border:1px solid green;
background-color:green;
width:600px;
margin-left:auto;
margin-right:auto;
}

und der html code noch.

<div class="background_div">
    <div class="inhalt">
       Inhalt<br />
       Inhalt<br />
       Inhalt<br />
       Inhalt<br />
       Inhalt<br />
       Inhalt<br />
       Inhalt<br />
       Inhalt<br /> 
    </div>
</div>
<div class="background_div_2"></div>

und hier noch die URL x)
http://ddc-forever.de/bg_wenig.html

es is keine saubere lösung. das weis ich selber.

der effekt des ganzen ist aber das es einem nun egal sein kann wieviel inhalt nun existiert. da wenn der inhalt die scrollhöhe erreicht er automatisch scrollt. und da die beiden BG divs genau gleich ausgerichtet sind der eine nur unten und der andere Oben beginnt kann man nun in ruhe scrollen da der untere seine position bei behält und der andere nun aufziehbar ist bis ins unendliche.

[Benny-one]

Tja, hat der Benny wohl doch recht gehabt

[Wyveres]

Original geschrieben von Benny-one
Tja, hat der Benny wohl doch recht gehabt

ja ok *g* aber dem Threadersteller ging es ja darum ein Bild im Hintergrund der seite fest zu positionieren x)

hab hier schon paar Beiträge zu dem Thema gefunden, aber noch keine Lösung dazu

Möchte mein 50px hohes Hintergrundbild am unteren Ende der Seite haben. Wenn die Seite zu lang ist muss man scrollen und sieht erst dann den Hintergrund. Also nicht Viewport sondern seite.

code:

body { 
margin: 0; 
padding: 0; 
background-image: url(/pfad/di0001_bgbottom.gif); 
background-repeat: no-repeat; 
background-position: center bottom; 
}

Der Hintergrund wird einfach nicht angezeigt.

und dafür eignet sich nun mal
background-attachment:fixed;
weil dadurch dieses hintegrundbild immer da bleibt egal wie weit man die seite nach rechts oder unten scrollt
und das für den body sogar in allen browsern *g*

[strauberry]

Hallo zusammen,

vielen dank für die vielen Beiträge :-)

Also irgendwie hat "Wyveres" das falsch verstanden: ich will eben KEIN fixed! Der Hintergrund soll immer am unteren Rand der gesamten Seite sein. Wenn wenig inhalt ist, ganz unten, wenn viel Inhalt ist zum Scrollen, dann ist er nicht sichtbar weil ich erst nach unten scrollen muss.

fixed ist ganz untem am Viewport und nciht ganz unten an der Seite.

Das klappt einfach nicht der Müll!

[asp2php]

Probiere mal, ich habe z.Z. kein IE5.5, IE6 und Opera zum Testen

<!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>
<style media="screen" type="text/css">
<!--
#page {
	height: 100%; /* das hier für den ie */
}

/* folgende anweisung wird nicht vom ie interpretiert */

#page[id] {
    height:auto;
    min-height:100%;
}
	
html
{
	height:100%;
	margin:0;
	padding:0;
}
	
body
{
	height:100%;
	margin:0;
	padding:0;
}

#page
{
	border-left:1px solid #000;
	border-right:1px solid #000;
	width: 700px;
	margin: 0 auto;
	min-height:100%;
	background-color:#f8f8f8;
	position: relative;
}

#content
{
	position: relative;
	background-color:#f8f8f8;
	padding: 5px 10px 5px 10px;
}

#header
{
	padding:5px;
	text-align:center;
	position: relative;
	background-color:#aaaaaa;
	height:120px;
}

#footer
{
	position:absolute;
	background-color:#ccc;
	background-image: url(footer.jpg);
	margin: 0 auto;
	width: 700px;
	clear: both; 
	bottom: 0px;
	height: 40px;
}
-->
</style>
	
</head>

<body>
<div id="page">
<div id="header">Header</div>
<div id="content">
	<p>
	Hallo zusammen,
	hab hier schon paar Beiträge zu dem Thema gefunden, aber noch keine Lösung dazu 
	Möchte mein 50px hohes Hintergrundbild am unteren Ende der Seite haben. 
	Wenn die Seite zu lang ist muss man scrollen und sieht erst dann den Hintergrund. 
	Also nicht Viewport sondern seite.
	Der Hintergrund wird einfach nicht angezeigt.
	Was muss ich tun?
	VIELEN DANK!
	</p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>