How do I make a background image responsive? using bootstrap?

Hi guys … I’m doing the portfolio project. Using HTML and Bootstrap.
I’ve created a background using a class:
.background-about {
width: 100%;
height: 500px;
background-image: url(“parthenon .jpg”);
background-size: 100% 100%;
border: 1px solid black;
}
Unfortunately, when I make the screen smaller, the image width decreases but the height remains the same - so it looks all stretched from top to bottom.

I figure there must be a way to do this - does anybody know how to get this sorted?

(For a normal image I would just use <img class ="img-responsive>.
But can’t write over the top of these images.)

How about background-size: cover;?