It’s me again and I’m getting desperate xD
I’m trying to solve this, but it’s impossible:
I want a website with a seperated background (50%|50%, in this example black|white). Then I want to add a content-div, with a certain width ON TOP of this div, not under it, like in this example (http://cdpn.io/xagCF).
Also – you don’t need to wrap these – just put them at the top of your markup.
How it works –
position: fixed fixes the div in place so it won’t move.
top : 0 pins it to the top
bottom: 0 pins it to the bottom
The div will automatically stretch to fill the space if you position it like this – this is quite a useful trick – you can set top, bottom, left and right to 0 and the element in question will fill the screen – handy for overlays etc will work on a positioned element (fixed or absolute)
left or right: 0 pins it to the left or right
left or right: 50% takes it halfway across the screen
background – just giving it a colour
z-index – this gives it a stack position -1 ensures it is under the content elements which have z-index auto (always a positive integer) unless you set them otherwise
Bear in mind this background will always be in place – i.e. it won’t scroll.