I have limited opinion about front end development. When it comes to determine background size, I always pick wrong sizes. I could not find any documentation that shows how to select image/background sizes properly.
For example: https://www.newlook.com/uk I would like to use .gif image as a background in big leaderboard. id = singleBanner What the dimensions should i use in this case ? and How can i determine this ?
I didn't understand everything but maybe you should use % on your width or else parameter to specify the dimension instead of set the exact dimension in pixel?
Otherwise, using framework like bootstrap, fundation, material UI help us to do anything we want
EDIT: in the case to find the dimension of an image you want to use in your website, i advise you to use placeholder.com, which allow you to place everywhere you want a false image, and you can set the dimension of it in html like below :
<img src="https://via.placeholder.com/100x100">
or
<img src="https://via.placeholder.com/521x425">
That pretty useful to test, you can set any pixel dimension and you will probably find the size you want
Check the website to find any command like for the extension .jpg, .gif, .png, or the color