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;
}