Div responsive background

[Michal]

Hi,

I want to prepare something like one of the w3 templates. This one:

https://www.w3schools.com/w3css/tryw3css_templates_gourmet_catering.htm

But I can't find a solution for the responsive div-background image.

I know I can use the background-size: cover and the image scales nicely, but the case is that I have to insert it in the div element, what means I have to enter:

• width: I tried 100% but the center doesn't work then, so I put 1600px, and everything looks fine however probably this isn't the best way
• height: If I use px, eg. 800 the picture scales nicely, but there is empty space below the image, if the screen goes below 800px height, if I use percent, the image doesn't show

In the template the image, together with the div scales nicely, and there is no empty space...

.main-image {
    position: relative;
    width: 1600px;
    background-image: url("main.jpg");
    background-size: contain;
    height: 800px;
    background-repeat: no-repeat;
    margin: auto;
}

 

 

[Michal]

for any one who face the same problem - the easiest way is to simply use flex-box, works perfectly

[Dodra]

I suggest using responsive design. Using pixels will make it work on a specific screen but not on all.

 

Try using:
width: 100%;
height: 100vh;

vh means View Height. 100 is actually 100% of the height of one's screen.