Is it possible to make a responsive div with a background-image that maintains the ratio of the background-image like with an ?

Question

Not a a native english speaker so there\'s probably a better way to shape the question...anyway:

What I want to create is similar to the header here: http://thegreatdisc

Answer 1

This is done with the background-size property:

background-size: cover;

Cover will make the image as small as it can be, whilst still covering the entirety of its parent, and maintaining its aspect ratio.

You may also want to try contain, which makes the image as big as it can be whilst still fitting inside the parent.

Source(s)

MDN - background-size CSS property