css: get white space at bottom and right of main background image on website if resolution falls below 1024 x 786

Question

I am working on a new website for work and am really new to css. I have created the following site:

http://hewdenportal.co.uk/

The problem is, when a user resizes their window below 1024 x 768 I get a blank white space at the bottom and to the right of the main background image, which I don't want to be there because the background should be set to scale 100% width and height.

Can someone please show me where I am going wrong?

My CSS for background image:

header .layer {
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.8);
}

Answer 1

Change <header style="background-image: url('assets/images/header.png'); to <header id="background">

And add the following properties:

#background {
    width: 100%;
    height: 100%;
    background-image: url('http://www.hewdenportal.co.uk/assets/images/header.png');
    background-size: cover;
    position: fixed;
}