Css responsive background

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>

and here my css

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

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

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

1 Like

Yes it is using bootstrap

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.

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

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.

1 Like

when i used contain it is responsive without any cropping 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.

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

If you want to take that route:-

background-size: 100% 100%;

But I don’t recommend it.

1 Like

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;
    height: 0;
    padding-top: 52%;

A post was split to a new topic: Problem with CSS positioning

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.