When you apply a background image in the header section of your website you may notice that not all the image is displayed and some parts are “cut-off” of the visible area. This is pretty normal in responsive web-design: you are inserting an image (that have fixed width, height and ratio) in an area that has variable sizes and ratio (as the verity of different monitors size and devices available).

The background images cover the available area of the viewport. Cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. As you can see in horizontal displays it’s more probable the top and bottom parts of the images exceed the area, while in vertical displays it’s more probable the left and right parts of the images exceed the area.

If you use the Parallax effect, this will a bit more evident cause the parallax background moves inside the area.

• Useful reference: CSS Tricks