Background Images Not Set To Cover Under 1800px

I have a website under development using Aspire Theme here:

http://www.newdentalwebsite.com/

In some instances the 1,4,5,7,9,12 widgets have their background images showing white space on either side.

What is happening is that if you are viewing the website on a large screen, say 1920px and you have your browser not maximized, it becomes possible to have the browser window set to any size. So for example my browser is often sitting in my window using about 1700px of screen. What happens is that responsive CSS kicks in under 1800 px which defines the background image as “auto” – not “cover”. The leaves a little gap. The image is only 1600 pixels. So if the browser is using 1601 up to 1799 px then the background images dont cover.

This is the CSS that is causing the issue. I am going to change the CSS from auto to cover but I would like to know if there is a reason to use auto and if I am creating some other unexpected issue.

Thanks

@media only screen and (max-width: 1800px)
.front-page-1, .front-page-4, .front-page-5, .front-page-7, .front-page-9, .front-page-12 {
-webkit-background-size: auto;—–> Change to Cover
-moz-background-size: auto;—–> Change to Cover
background-size: auto;—–> Change to Cover
}