Verschillende achtergronden

[lerrie]

Deze vraag is misschien een beetje lastig uit te leggen. Maar hoe kan ik er goed voor zorgen dat verschillende divs (Om het simpel te houden: Header, content en footer) van bijv. allemaal 700px breed, elk een andere achtergrond krijgt die wel gewoon herhaalt wordt op de x-as. Dus horizontaal doorloopt ook buiten het div?

Ik wil dus bijv. een site maken met 3 verschillende lagen (Header, content en footer) (zoals hier http://submitquickly.com/) die allemaal een andere achtergrond kleur/image hebben. Maar omdat de content op elke pagina niet even groot is kan ik niet met een statische achtergrond werken omdat deze niet mee beweegd op de y-as. Gebruik ik divs van bijv. 800px breedt en geef deze elk een eigen achtergrond dan zit ik nog steeds met de rest van de achtergrond buiten de divs (buiten de 800 px breed)

 

[ArendB]

Hallo,

Je kan proberen de breedte van de divs 100% te maken. Dan zijn ze altijd net zo groot als je browser scherm. Dit zou, als ik je goed begrijp, het antwoord moeten zijn op je vraag.

 

[csshunter]

Hoi lerrie,
Of misschien zoiets:

<div id="buitendiv">
    <div id="binnendiv">
        <h2>De inhoud...</h2>
        <p>Lorem ...</p>
    </div>
</div>

Met:

body {
    width: 980px;
    margin: 0 auto;
    }
#buitendiv {
    background: url(images/mooie-background.png) repeat-x;
    }
#binnendiv {
    width: 700px;
    margin: 0 auto;
    }

De #buitendiv (die per definitie 100% breed is) zorgt dan voor de zich in de x-richting herhalende achtergrond over de volle breedte.
De #binnendiv kan je dan zo breed of smal maken als je zelf wilt (en/of centreren, enz.) terwijl de achtergrond daarnaast gewoon blijft doorlopen, en automatisch zo hoog wordt als nodig is voor de inhoud van de #binnendiv.

• Test: www.developerscorner.nl/csshunter/tests/extra-background-div.htm

Met vriendelijke groet,
CSShunter

 

[lerrie]

Bedankt ik ga eens even kijken! Als ik die 2e wid naar 100% width zet dan komen er allemaal lege plekken in mijn dreamweaver preview. Zwaar irritant. Als ik hem preview in men browser ziet het er wel goed uit! Kan ik hier wat aan doen?

Plus als op preview in firefox druk, dan gaat hij naar google.nl ipv de goede website. Wat doe ik fout, normaal gaat hij altijd naar de desbetreffende website!

GRoeten