background-image doesn't appear if is empty?

Answer 1

The best way I have found is: for landscape:

width:100%;
height:0;
padding-top:[ratio]%;

for portrait:

width:[ratio]%;
height:0;
padding-top:100%;

You need to determine which side is longer and accept this dimension as 100% then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.

Answer 2

I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.

Example code:

.fixed-bg {

    /* The background image */
    background-image: url("img_tree.gif");
    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
}

code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp