Css responsive background

[adhisenchiniven]

Hi everyone,
I have my html code

<header id="home" >
       <div class="container-fluid" >   
                <div class="container">
                     <div class="row">
                          <div class="menu-btn"><span class="hamburger">&#9776;</span></div>
			</div>
		</div>	
	</div>		
 </header>

and here my css

header .container-fluid
{
    background-image: url('images/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    padding-top: 36px;
}

The problem is that the background image(back.jpg) is not responsive on small devices screen.
Please help me
Thanks

[SamA74]

Judging by those classes, there is more css. Is this using Bootstrap?

[adhisenchiniven]

Yes it is using bootstrap

[SamA74]

Using the property background-size: cover; should be responsive, but you may prefer the results with the image centred.
Try changing the first line to:-

background: url('images/back.jpg') center ;

Of course cover will result in some cropping of the image.

[adhisenchiniven]

Sorry that the problem the image is responsive but it crops the image.
the website is online for testing
aprim.webmaurice.net

[SamA74]

@adhisenchiniven

Sorry that the problem the image is responsive but it crops the image.

That is because every image has a fixed aspect ratio. But different screens have different aspect ratios which may not match the image, so cropping must occur for the image to fit.
If you do not want any cropping, use contain instead of cover.

[adhisenchiniven]

when i used contain it is responsive without any cropping but the problem it create a larger white space between the two classes.

[SamA74]

@adhisenchiniven

but the problem it create a larger white space between the two classes.

Well you have to have either cropping or blank space when the picture aspect and screen aspect do not match.
The only other alternative is to distort and stretch the image which may look bad.

[adhisenchiniven]

OKay thanks mate.
If ever you got any idea later do let me know thanks.

[SamA74]

@SamA74

The only other alternative is to distort and stretch the image which may look bad.

If you want to take that route:-

background-size: 100% 100%;

But I don’t recommend it.

[ralphm]

@adhisenchiniven

when i used contain it is responsive without any cropping but the problem it create a larger white space between the two classes.

What I would suggest is that, on small screens, you remove the requirement for the container to be 100vh. You aren’t really gaining anything from it, and it’s messing terribly with your image, whichever way you look at it.

On small screens, you could just change your CSS to something like this to get a perfectly nice result:

header .container-fluid
{
    background-image: url('images/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height: 0;
    padding-top: 52%;
}