Problem with MVC and Jquery backstretch

Hello Mate,

I am having a script with MVC frame work along with using Jquery backstretch plugin to fit the background to the screen. But it need to converted into the responsive site.

It is having 7 or 8 pages and those pages contains a separate image as there background image. By using backstretch plugin it is doing the job. But it is not responsive.

I had gone through with many plugins and css tricks that can make that background image stretch out to the full screen and when shrink or expand the browser it will behave same. Then the problem here is the MVC frame work that is having some common libraries for the page headers and css style sheet linking etc. I totally lost where modify and what to modify.

You can see the link here.
www.maigamihair.com (it is not an affiliate link or etc. if admin want can delete the link )

Please help me out in that. Even I dont know I had put the problem in proper way. But at least I started asking. lol

 

I think what you are looking for is this:

On the background images, add this CSS rule:

background-size: cover;

Code (CSS):

 

Thanks for responding mate, I will put this code and test.

 

Actually it did not work. As I mention at present it is using using jquery backstretch plugin. Any how disable the plugin and tried. It was covering up the image but it is not responsive, if you re-size your browser, the image is cropped.
What I want that image to be smoothly re-size itself when I shrink or expand the browser.