All I want is to scale the image to fit my div both in length and breadth.
Here is the codepen.io link project so far: https://codepen.io/govind-rathi/pen/qGYbeb
It will be more easy for me to know what you are suggesting if you can send the code snippet with it.
Happy Coding! 
The image you are using has an aspect ratio of 1:2 while your container has 2:1. Now if you want your image to be visible in whole, use background size contain, and if you want it to span till the whole width and height of container, use bg-size cover, though in this case the image wont be visible in full.
Edit- I am not fluent with display: grid … but i would suggest you to try display flex, you can modify a page layout very easily
Changing background-size to contain is not helping.
what do u exactly want with the image? reply briefly
I want the image to stretch according to the size of the div no matter it distorts or not.
Even if I give it a particular height say 400px, it fits the conatiner for only particular viewing size of browser window. I need to fit the image inside the window no matter what the width of the viewing area is.
If you don’t care about it distorting then you can use background-size: 100% 100%;
Thank You so much! I have been searching for this solution since past five days. Didn’t get this anywhere. I wish I could give you 100 likes!