Full width image below header

Hi, I wonder if you could help by pointing out the best way to add a fullwidth “banner image” below the nav bar.
Ideally I’d like to have an image and possibly some text overlay which will resize on any device without cropping parts of the image out, I have tried different solutions as follows:

You can see what I am trying to achieve here: http://marsworthfunrun.co.uk/run-day-information/

1) used a background image in a colour section with text overlay – this works BUT as the image will get cropped slightly unpredictably as the screen narrows it is difficult to use with the main subject remaining visible – in this case pictures of runners which are fine on my 21″ imac but heads get cropped out on ipad and mobiles…

2) used a full width slider with a single image slide – this produces what I want but maybe not very efficient for page load time ? and the text comes in slightly after the image has loaded

3) used a “tool tip” image without tool tips but again this may not be very efficient

Any advice welcome
Thanks in advance
Hugues