To cover the full width of the screen I used 2 floats of 50% width.
To make space in the middle of those floats a negative margin is applied to the floats which creates a vacuum in the middle that content will be sucked into.
When you apply a negative margin to the opposite side of a float (e.g. a right negative margin on a left floated element or a left negative margin on a right floated element) you allow content to overlap on that side.
Therefore with 478px taken off each side it allows a gap in the middle to appear that is the width of your layout (956px). However this will just mean content will overlaps so thye final step is to nest a div inside each float and give it a positive margin (478px for each float) to keep the background colour away from overlapping the middle of the area.
The result is a full width band of colour apart from the middle section where you can stick your image.