CSS Problemen met background

[Verwijderd]

Ik heb het volgende probleem en kan maar niet tot een passende oplossing komen. Ik wil graag de pagina met een #header div beginnen welke 300 pixels hoog is en ook een passende background van 300 pixels hoog heeft. Dit is geen probleem.

Vervolgens komt hierna de #content div van de pagina welke een achtergrond heeft die blijft herhalen in de y richting tot de pagina geen inhoud meer bevat. Dit is ook geen probleem.

Nu wil ik echter dat de daadwerkelijke inhoud van de #content div (#page div met H1 en paragraaf) halverwege de #header div begint (op 150pixels bijvoorbeeld). Dit, omdat de header background een aflopend plaatje is wat ik op de achtergrond wil zien wegfaden waarna de herhalende achtergrond van de content div verder gaat.

• Ik heb al geprobeerd om de page div een negatieve top margin te geven van 150px. Dit zorgt er voor dat de H1 wel halverwegen de header begint, maar dan heb ik de background van de content div ook over de header heen staan. En dus maar een halve header.
• Ik weet dat CSS3 de mogelijkheid biedt om 2 background images op te geven, maar de pagina moet minimaal IE7 compatible zijn, dus dat is geen optie.
• Mijn laatste redmiddel is het opdelen van de content in twee delen (content welke in de header en met de header als background te zien moet zijn en content welke hierna komt. Dit zal echter altijd voor een horizontale lijn in mijn pagina zorgen terwijl ik het liefst ook nog een kader zou willen trekken om zowel mijn H1, welke boven de header bg staat, en de eerste paragraaf welke boven de content bg staat.
• Beide achtergronden zijn transparant, dus kan ik het me helaas niet veroorloven om met een div in een div met twee overlappende achtergronden te werken.
• Met de div in div constructie heb ik background-position ook al geprobeerd met het doel de herhalende background lager te laten beginnen, maar dat gaat niet in combinatie met repeat-y. Als ik na 300 pixels met de herhalende background begin welke herhaald in de y richting, dan wordt dit ook terug naar boven herhaald.

Hopelijk is mijn uitleg niet te vaag. Heeft er iemand een idee hoe ik dit kan oplossen en of dit uberhaupt mogelijk is?

HTML: index.html

<div id="wrapper">
    <div id="header"></div>
    <div id="content">
        <div id="page">
            <h1>title</h1>
            <p>The first paragraph</p>
        </div>
    </div>
</div>

Cascading Stylesheet: style.css

body {
    background-image: url(bg.jpg);
    background-repeat: repeat-x;
}

#wrapper {
        width: 994px;
        margin: 20px auto;
    }

#header {
    background-image: url(header.png);
    background-repeat: no-repeat;
    height: 300px;
}

#content {
    background-image: url(repeating-bg.png);
    background-repeat: repeat-y;
}

#page {
    position: relative;
    margin-top: -200px;
}

[ Voor 9% gewijzigd door Verwijderd op 04-11-2010 17:11 ]

[Bosmonster]

Geen elementen onder elkaar, maar in elkaar gebruiken. Zo kun je de backgrounds gewoon stapelen en beginnen met je content waar je wilt.

[Verwijderd]

Bosmonster schreef op donderdag 04 november 2010 @ 16:04:
Geen elementen onder elkaar, maar in elkaar gebruiken. Zo kun je de backgrounds gewoon stapelen en beginnen met je content waar je wilt.

Ik snap wat je bedoelt, maar dan krijg ik het probleem dat de background van de content te vroeg begint en achter de content van de header zichzelf herhaald. Beide achtergronden zijn transparant, dus kan ik het me helaas niet veroorloven dat de lager liggende div de repeating background heeft en een div daarbinnen in de header background krijgt.

Een belangrijk detail wat ik ben vergeten te vermelden.

[Bosmonster]

background-position al geprobeerd?

Of als het toch een horizontaal herhalende achtergrond is gewoon wat transparantie bovenin je afbeelding?

[ Voor 61% gewijzigd door Bosmonster op 04-11-2010 16:46 ]

[Verwijderd]

Bosmonster schreef op donderdag 04 november 2010 @ 16:45:
background-position al geprobeerd?

Of als het toch een horizontaal herhalende achtergrond is gewoon wat transparantie bovenin je afbeelding?

De herhaling is in de y-richting, verticaal dus. Ik heb background-position ook al geprobeerd met het doel de herhalende background lager te laten beginnen, maar dat gaat niet in combinatie met repeat-y.

Stel dat je na 300 pixels met de herhalende background zou beginnen in de y richting dan wordt dit ook terug naar boven herhaald. Zeer storend.

[Verwijderd]

Dan maak jet het canvas van het plaatje aan de bovenkant 300 pixels transparant?

[Verwijderd]

Verwijderd schreef op donderdag 04 november 2010 @ 19:05:
Dan maak jet het canvas van het plaatje aan de bovenkant 300 pixels transparant?

Wordt dan alles wat er onder zit dus transparant? Dit zou dan inderdaad een mooie oplossing zijn. Ik heb inmiddels besloten om het anders op te gaan lossen zodat ik geen 2 delen hoef te hebben. Header inclusief content background als 1 grote bg. Alle pagina's hebben namelijk een maximale hoogte. Er zit veel wit in, dus zal dit qua laadtijd niet zo veel uit moeten maken.

In ieder geval bedankt voor jullie suggesties. Hier mag een slotje op.