http://mrcpsychmentor.com/testsite/
http://mrcpsychmentor.com/

if you compare the homepage versions above the following will make sense

i want to get rid of the white gap between the background image on the 'branding' div & the blue border above it (which is part of the horizontally tiled background image of the 'header' div above - but crucially, not at the bottom of it). http://mrcpsychmentor.com/testsite/ shows this

[ NOTE: you may notice that the main site (http://mrcpsychmentor.com/) doesn't actually have a background image on the 'branding' div at all - the tape measure background image is actually applied to a div contained within it, called 'brandingImage', but i'll be changing this in time ]

basically, i wanna have a background image on the 'branding' div that stretches - vertically - from the blue border below it to the blue border above it. WITHOUT THE ANNOYING WHITE GAP. if you do inspect element on Firebug on the header div it should be clear why the white gap is there in the first place

i can probably fix it by altering the CSS & HTML of the header, but apart from being messy i'm not sure if the guy who does the HTML/PHP coding will be ok with that

so, does anyone have any ideas for a quick & easy solution? doesn't matter how hacky it is. something like perhaps adding an extra div somewhere, maybe with an absolute positioning value, or something else possibly with margins?


any ideas welcome anyway, as per


PS: you have to view the site with a window size greater than 1150px. otherwise the image on the testsite will just be another tape measure - not the 'exam note' image i replaced it with so you can clearly see the white gap

PS2: i couldn't attach images before. i tried creating this post with just screenshots instead of links, & whilst sitepoint seemed to let me upload the images it wouldn't insert them into the post. anyone know why this might've been?