[CSS] Twee achtergrond afbeeldingen in een div - Softwareontwikkeling

donderdag 31 augustus 2006 22:52

Acties:

0 Henk 'm!

Matthijs1982

Topicstarter

Weet iemand of het mogelijk is om met een div <div id="container"></div> twee achtergronden te krijgen? Ik wil namelijk een achtegrond die zich herhaalt en een afbeelding die slechts een keer wordt getoond, maar dan onderaan de pagina. Deze moet meebewegen met de content.
dit is geen footer, de div's waar de content in staan bevatten vaak maar enkele regels tekst.

Kan iemand laten weten of dit mogelijk is en hoe?

[ Voor 12% gewijzigd door Matthijs1982 op 31-08-2006 22:56 ]

donderdag 31 augustus 2006 23:04

Acties:

0 Henk 'm!

user109731

Nee dat kan niet. Je kunt nu OF een extra element toevoegen (in of onder je container?) OF van een al bestaand, ander element de achtergrond in stellen.

donderdag 31 augustus 2006 23:10

Acties:

0 Henk 'm!

Matthijs1982

Topicstarter

Dit werkt. alleen krijg ik nu standaard een scrollbalk.
Weet je misschien hoe ik dit samen 100% kan maken.

Ik heb het zo:
<div id="container"></div>
<div id='achtergrond"></div>

CSS:
[css]
#container {
width: 780px;
margin: 0 auto 0 auto;
background-color: #ffffff;
position: relative;
min-height: 100%;
height:auto !important;
height:100%;
background-attachment:scroll;
background-image:url("../afbeeldingen/bg_sidebar.gif");
background-repeat: repeat-y;
}

#achtergrond{
width: 780px;
margin: 0 auto 0 auto;
background-attachment:scroll;
background-image:url("../afbeeldingen/bottom.gif");
background-repeat: no-repeat;
background-position: bottom;
}
[/css]

donderdag 31 augustus 2006 23:15

Acties:

0 Henk 'm!

Fuzzillogic

Cool

Zoals min of meer al gezegd dus: geneste DIVs, met de inner DIV op height en width 100%. Dan kun je ze beide een background geven. Klaar.

donderdag 31 augustus 2006 23:23

Acties:

0 Henk 'm!

Matthijs1982

Topicstarter

Dat heb ik. ik heb een container div op 100% hoogte. Als ik daarin de div's plaats en diegen die onder moet staan, komt diegene die onder moet staan ergens in het midden te staan.
Dit komt doordat de div's waar content in staan, maar een paar regels tekst hebben. Vandaar dat ik het onder de container heb gezet.

Ik kan de container een hoogte van 97% geven en de div onderaan een hoogte van 3%. Dit werkt op een resolutie van 1280x800 pixels, maar ik kan niet testen of dit ook op hogere resoluties werkt.

donderdag 31 augustus 2006 23:54

Acties:

0 Henk 'm!

Fuzzillogic

Cool

HTML:

...
<body>
<div id="outer">
 <div id="inner" />
</div>
</body>
....

Cascading Stylesheet:

body, html {
 height: 100%;
}
#outer {
 background: url('plaatje1.png') top center no-repeat;
 height: 100%;
}
#inner {
 background: url('plaatje1.png') top center no-repeat;
 height: 100%;
}

Dat werkt niet? (gebruik sowieso een moderne browser, IE gaat misschien zeiken over de lege divs, het kreng. En gebruik valid (X)HTML)