Ok instead of applying the background image to the whole page, apply it only to the header section, hover over the header area and you'll see the edit/pencil icon for the area. Click on that to see the options, inside that panel you'll see an option to set an 'area background'. This background will then fill the whole header area and you can set the page content below to a static color like in your first screenshot.
To add a background to the menu you can either set a class for the section, then apply an image or color to that area using css. A tutorial on how to do this can be found here - http://docs.pageline...on-area-styling
To remove the gaps between sections you'll need to adjust the padding/margins using css to bring them closer together. You can find out which areas to make the adjustments using browser inspection tools like firebug or chrome dev tools. A guide on css inside DMS can be found at http://docs.pageline...ow-to-customize
We don't currently offer a slider that has a floating menu/logo container for dms. However you could create that effect using css to position the elements in that way, moving the slider up under the menu and logo by adjusting the margins.