Problemen met background-position

woensdag 4 mei 2011 16:51

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Beste Tweakers,

Ik heb problemen met het goed instellen van de background bij de volgende website:
Testcase linkje

Bij volledig formaat lijkt alles goed te gaan, althans in IE7 en 8. Echter wanneer ik de website ga schalen door de window kleiner te maken (kleiner dan de width van de container: 1024px), dan verspringt de achtergrond ten opzichte van de container, alsof hij dus niet meer in het centrum staat. Ik heb me al suf gezocht op andere mogelijkheden voor de background-position en heb ook de 50% (en 49%...) geprobeerd, maar dit mocht niet baten. Ik heb het idee dat de container verspringt wanneer ik het venster kleiner maak, maar kan niet zien waar dat aan ligt.

Het liefst zou ik de code anders opbouwen zodat de volgende divs: links, rechts, en menu, meeschalen met de content div, dit krijg ik echter niet voor elkaar. Maar tips daarover zijn ook heel welkom.

De html code is zo opgebouwd:

HTML:

<body>
    <div id="links"></div>
    <div id="rechts"></div>
    
<div class="container">
    <div class="header"></div>
        <div class="menu">{menu}</div>
        <div class="maincontent">{content}</div>
</div>
</body>

Mijn css code ziet er als volgt uit:

Cascading Stylesheet:

body {
    margin: 0;
    padding: 0; 
        background: url(images/bodybackground.png) repeat-y;
    background-color: #5fcd4c;
    background-position: center;
    position: relative;
}

#links {
    min-height: 757px;
    width: 50%;
    left: 0;
    background: url(images/lv.png) repeat-x;
    background-color: #5fcd4c;
    position: absolute;
}

#rechts {
    min-height: 757px;
    width: 50%;
    right: 0;
    background: url(images/rv.png) repeat-x;
    background-color: #c3fdc3;
    position: absolute;
}

div.container {
    width: 1024px;
    height: 100%;        
        background: url(images/bodybackground.png) repeat-y;
    background-color: #5fcd4c;
    background-position: center;
    margin: 0 auto;
    position: relative;
}

div.header{ 
        width: 1024px;
        height: 173px;
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/* menu */

div.menu {
    background-image: url(images/menu.png); 
    background-repeat: repeat-y;
    float:left;
    width:220px;
        height: 800px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

/* maincontent */

div.maincontent {
    background-image: url(images/maincontent.png);
    background-repeat: no-repeat;
        background-color: #c3fdc3;
    width:800px;
    min-height:800px;
        margin-left: 220px; 
        float: left;
        overflow: hidden;
    position: absolute;
}

Graag hoor ik jullie visie, oplossingen of tips voor dit probleem. Btw. ik weet dat er op het site-ontwerp opzich veel aan te merken is, maar dit is nu eenmaal volledig op wens van de klant zo gedaan.

Alvast bedankt!

[ Voor 5% gewijzigd door Verwijderd op 04-05-2011 17:23 ]

woensdag 4 mei 2011 16:58

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

Als je code post gebruik dan code tags a.u.b. Verder: linkjes naar 'complete' sites zien we niet graag (spam); plaats liever een linkje naar een uitgeklede testcase (en dus enkel relevante(!) code erin: geen menu's, geen content (of lorem ipsum...) etc.) om je probleem te reproduceren. Dat is voor jezelf ook makkelijker om aanpassingen te maken danwel uit te sluiten waar 't probleem door veroorzaakt wordt. Gebruik dus even de edit knop (

) even om je topicstart aan te passen, wil je?

Thanks!

Pas ook op dat je topic geen Kan iemand even...? wordt trouwens; ik mis namelijk nogal wat zaken uit onze Quickstart. Die kun je dan ook meteen even aanpakken als je toch gaat editten

Oh, en tot slot: je hoeft ook niet
na elke zoveel woorden
op enter te drukken; ons
forum handelt zelf de tekstomloop prima af; het leest nogal vervelend als er elke paar woorden een nieuwe zin begonnen wordt

[ Voor 31% gewijzigd door RobIII op 04-05-2011 17:02 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 4 mei 2011 17:25

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

Enige reden die ik zo kan bedenken is dat je ineens een extra scrollbar krijgt en dat hierdoor de achtergrond verspringt.

Persoonlijk kan ik het overigens niet reproduceren met bovenstaande link (of ik snap gewoon niet wat je bedoelt)

[ Voor 9% gewijzigd door Bosmonster op 04-05-2011 17:25 ]

woensdag 4 mei 2011 17:26

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Als je de window heel klein maakt (< 1024px, zeg bijv. half scherm) dan begint de achtergrond helemaal onderaan het scherm te verspringen, dit is dus de achtergrond van de body die je hier ziet.

Onderwerpen