nicht angemeldet
background-images überlappen?
hallo,
ich habe vollgendes css-konstrukt ...
body {
font-family: trebuchet ms, Arial, Helvetica, sans-serif;
background-image:url(../img/bg.jpg);
padding:0px;
margin:0px;
font-size:12px;
}
#background {
width:100%;
height:100%;
background-image:url(../img/bg_body.gif);
background-position:center;
background-repeat:repeat-y
}
es ging hierbei darum ... ein muster in den hintergrund zu laden und eine content fläche mit bg_body als gif darüber zu positionieren!
alles wunderbar, nur ...
sobald die seite größer als 100% wird ... also zu scrollen ist ... hört das bild in <div id="body"> auf ...
stell ich jedoch height:200% bekomm ich automatisch scrollbalken ...
wie kann ich dies vermeiden?
ich will ein huntergrund muster und davor eine ebene mit einem weiteren bild ...
habe bereits versucht den bg.jpg in den html tag zu werfen udn body mit bg_body.gif zu belegen jedoch funktioniert dies ebenfalls nicht!
was wer rat?
lg, susi
-
Hi,
vielleicht hilft es ja: Schau dir mal die css-Eigenschaft z-Index an.
Gruß,
Thorsten F.-
Hi,
vielleicht hilft es ja: Schau dir mal die css-Eigenschaft z-Index an.
danke für den hinweis, hab ich aber auch bereits getan gibt keinen anderen effekt!
es muss doch eine möglichkeit geben dass ein <div> sich anhand seinen inhalts ausdehnt!
wenn der inhalt jedoch über 100% geht ist, hört das background-image dort auf!lg, susi
-
hi,
es muss doch eine möglichkeit geben dass ein <div> sich anhand seinen inhalts ausdehnt!
Das kann es nur, wenn seine Höhe nicht explizit begrenzt wurde.
wenn der inhalt jedoch über 100% geht ist, hört das background-image dort auf!
Natürlich, weil du eine Höhe von 100% ja explizit festgelegt hast - an einer Stelle, wo du eigentlich nur eine Mindesthöhe meintest.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hallo,
auch dies hab ich bereits verwendet ...
ohne höhe ... sieht man nichts ...
mit min-height:100% sieht man abermals nur bis 100% und dann ist es aus!hab aber auch oft im firefox dass problem, dass ein div in einem div ist jedoch der hintergrund von dem übergeordneten element nicht angezeigt wird, falls man keine höhe oder breite eingibt obwohl man ja denken müsste das übergeordnetet passt sich der ausdehnung des unteren an ...
pustekuchen ...lg, susi ...
-
hi,
auch dies hab ich bereits verwendet ...
ohne höhe ... sieht man nichts ...
mit min-height:100% sieht man abermals nur bis 100% und dann ist es aus!Code?
hab aber auch oft im firefox dass problem, dass ein div in einem div ist jedoch der hintergrund von dem übergeordneten element nicht angezeigt wird, falls man keine höhe oder breite eingibt obwohl man ja denken müsste das übergeordnetet passt sich der ausdehnung des unteren an ...
Ob "ein Div in einem anderen Div ist" - im Quelltext - ist aus Sicht von CSS wenig maßgeblich.
Entscheidend ist, ob du Elemente im Fluss belässt oder aus diesem herausnimmst. In letzterem Falle beeinflussen sie natürlich die Maße ihrer Vorfahrenelemente nicht mehr.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
sie sind im fluss ...
und es ist doch entscheidend ob jene verschachtelt sind ...
wenn ich sie nicht aus dem fluss nehme sollten sie sich doch an dem unteren element anpassen!
<style>
body {
background-image:url(img/bg.jpg);
padding:0px;
margin:0px;
font-size:12px;
}
#background {
width:100%;
height:100%;
background-image:url(img/bg_body.gif);
background-position:center;
background-repeat:repeat-y;
background-attachment: fixed;
}
#content_area {
width:598px;
height:990px;
margin: 5px 0px 0px 0px;
background-color:orange;
float:left;
background-image:url(img/pattern.gif);
}
</style>
<body>
<!-- ###PAGE_BODY### start -->
<div id="background">
<div id="content_area">
</div>
</div>
</body>also meiner meinung nach, müsste bei diesem code ...
der body einen background haben ...
der background-div darin sein ...
und sich jener falls über 100% in der höhe an dem #content_area orientieren ...lg, susi
-
hi,
also meiner meinung nach, müsste bei diesem code ...
der body einen background haben ...
der background-div darin sein ...
und sich jener falls über 100% in der höhe an dem #content_area orientieren ...Nein.
Was hast du an meiner ersten Antwort nicht verstanden?Du hast für #background eine Höhe von 100% definiert, und an die hält er sich auch (in richtigen Browsern).
(Das eine Bezugsgröße für die Prozentberechnung fehlt, weil bei den Vorfahrenelementen keine explizite Höhenangabe gemacht wurde, kommt u.U. erschwerend hinzu.)gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
vollends klar ...
nur .... wie ist die alternative?
dass es nicht geht, weiss ich nun auch bereits ...wenn ich height:100% weg nehme, wird es mit 0px angezeigt!
lg, susi
-
hi,
wenn ich height:100% weg nehme, wird es mit 0px angezeigt!
Natürlich - weil du das Nachfahrenelement ja aus dem Fluss genommen hast.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hallo,
und wie schaut nun die lösung aus?
warum ist es aus dem fluss? aus dem fluss nehm ich es ja nur falls ich die position: setzte ...
die ist hier nicht passiert ...also wie integrier ich es abermals in den fluss?
es ist das erste element nach body nur mit einer höhen und breiten angabe, warum sollte es aus dem fluss sein?
-
hi,
warum ist es aus dem fluss? aus dem fluss nehm ich es ja nur falls ich die position: setzte ...
Nein.
Auch float nimmt es aus dem Fluss.
also wie integrier ich es abermals in den fluss?
Gar nicht.
Bzw. nur, in dem du von Anfang an alles unterlässt, was es herausnehmen würde.es ist das erste element nach body nur mit einer höhen und breiten angabe
Die Position des Elementes im Code ist hier vollkommen egal.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
also nix für ungut, aber ...
du machst keinen meter wenn es darum geht zu helfen ...
wenn du genau schaust kommt bei mir nie ein float vor, oder?
ich dachte dieses forum sei dazu da damit man fragen stellt und antworten bekommt und nicht schulmeisterlich belehrt wird über dinge die man zur diskussion stellt ...susi
-
Liebe susi,
wenn ich weiter oben nachlese, dann steht in Deiner content_area ein float:left oder etwa nicht?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
-
-
-
-
Hallo, Susi.
<style>
#background {
width:100%;height:100%;
Das heißt: 100% der Höhe des Elternelements, also genauso hoch ;-); wie hoch ist das Elternelement?background-image:url(img/bg_body.gif);
background-position:center;
background-repeat:repeat-y;
background-attachment: fixed;
}
#content_area {
width:598px;
height:990px;
margin: 5px 0px 0px 0px;
background-color:orange;float:left;
Damit nimmst Du das Element aus dem Fluß (was immer das heißen mag).background-image:url(img/pattern.gif);
}
</style>
<body>
<!-- ###PAGE_BODY### start -->
<div id="background">
<div id="content_area">
</div>
</div>
</body>also meiner meinung nach, müsste bei diesem code ...
der body einen background haben ...Ja.
der background-div darin sein ...
Ja.
und sich jener falls über 100% in der höhe an dem #content_area orientieren ...
Nein.
Erstens: Ein floatendes Element beinflußt die Höhe seines Elternelements nicht. Weil es nicht im Fluß ist.
Zweitens: Auch wenn die content_area im Fluß wäre -- oder wenn danach ein Element käme, das den Fluß wiederherstellt http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear -- Du hast die Höhe 100% definiert (nicht die Mindesthöhe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width).
O.K.?
-
-
-
-
-
-
-
Hi, Susi.
sobald die seite größer als 100% wird ... also zu scrollen ist ... hört das bild in <div id="body"> auf ...
stell ich jedoch height:200% bekomm ich automatisch scrollbalken ...Meinst Du <div id="background">? Probier mal, die Höhenangabe wegzulassen. Wenn´s nicht klappt zeig mal ein bischen HTML.