Make Background Image Responsive

Responsive css background images

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Do not set width, height, or margins.

EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

How to make background-image fill the div and responsive

Use background-size:contain

Scales the image as large as possible without cropping or stretching the image.

background-size - reference

body,html{  height: 100%;}div#second-footer-container {  background-image: url("https://i.imgur.com/0qRwdSI.png");  width: 100% !important;  background-size: contain;  background-repeat: no-repeat;  height: 100%;}
p#socmed-container {  text-align: center;}
p#socmed-container a {  padding: 0 5px !important;}

<div id="second-footer-container">  <p id="socmed-container">    <a href="https://www.facebook.com/test/">      <img id="fb-img" width="25" src="https://i.imgur.com/6ye5lwf.png" alt="Facebook" />    </a>    <a href="https://www.instagram.com/test/">      <img id="ig-img" width="25" src="https://i.imgur.com/SEsRzFL.png" alt="Instagram" />    </a>    <a href="https://www.twitter.com/test/">      <img id="twitter-img" width="25" src="https://i.imgur.com/y8o23cc.png" alt="Twitter" />    </a>  </p></div>

Background image responsive to mobile view using pure css

One elegant solution would be to better controlling exactly what you want to show in landscape and portrait mode. If you want to be responsive with a landscape image on a portrait screen you necessarily have to "lose something", as per @salff comment

My snippet for being more flexible depending on user screen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

html
{
    background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
}

#warning-message { display: none; }

@media only screen and (orientation:portrait)
{
    #wrapper { display:none; }
    #warning-message { display:block; color: white;}
    
    html
    {
        background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
        background-size: cover;
        height: 100%;
    }       
}

</style>
</head>
<body>

<div id="wrapper">
    <h2>Responsive Images</h2>
    <p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
    <p>Resize the browser window to see the effect.</p>
</div>

<div id="warning-message">
    this website is only viewable in landscape mode
</div>

</body>
</html>

NOTE: the code was produced crossing and tweaking your code, w3schools snippet and this answer

How to make background-image responsive?

Try using this:

.panda_section_wrapper {
    max-width: 1600px;
    background-color: pink;
    background-image: url(img/GiantPanda.png);
    height: 25vh;
    background-color: pink;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    @media only screen and (min-width: 968px) {
       height: 75vh;
    }
  }

And see if this works

How to make this background-image responsive

This is what you're trying to do, I added height: 100vh to the main container and moved the style="background: ...." inside the css in .bg-img . I also added margin: 0; padding: 0 to the body

body {  margin: 0;  paddong: 0;}
.hero-slides .single-hero-slide {  height: 100vh;  /* You can change this to 50vh (50% of the screen width) and will still be responsive */  width: 100%;  position: relative;  z-index: 1;  -webkit-transition-duration: 800ms;  transition-duration: 800ms;  overflow: visible;  /*cursor: pointer; */}
.hero-slides .single-hero-slide .hero-slides-content {  position: relative;  z-index: 1;  -webkit-transform: translateY(75%);  transform: translateY(75%);  -webkit-transition-duration: 800ms;  transition-duration: 800ms;  bottom: 0;}
.hero-slides .single-hero-slide .hero-slides-content .line {  width: 100px;  height: 1px;  background-color: #ffffff;  margin-bottom: 30px;  display: block;}
.hero-slides .single-hero-slide .hero-slides-content h2 {  color: #ffffff;  font-weight: 100;}
.hero-slides .single-hero-slide .hero-slides-content p {  color: #ffffff;  margin-bottom: 0;  -webkit-transition-duration: 500ms;  transition-duration: 500ms;  margin-top: 140px;}
.hero-slides .single-hero-slide:hover .hero-slides-content {  -webkit-transform: translateY(0%);  transform: translateY(0%);}
.hero-slides .single-hero-slide:hover p {  margin-top: 40px;}
.bg-img {  background-image: url("https://picsum.photos/5472/3648?image=1074");  background-position: center center;  background-size: cover;  background-repeat: no-repeat;}
.slide-background-overlay {  position: relative;  z-index: 1;  bottom: 0;  left: 0;  width: 100%;  height: 60%;}
.slide-background-overlay::after {  content: "";  position: absolute;  height: 60%;  width: 100%;  z-index: -1;  bottom: 0;  left: 0;}

<section class="hero-area">  <div class="hero-slides">    <!-- Single Hero Slide -->    <div class="single-hero-slide bg-img slide-background-overlay">    </div>  </div></section>

How to maintain responsive background image height while changing screen width?

You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.

You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.

Here's an example using your CSS settings (except see caveat below):

* {
  margin: 0;
  padding: 0;
}

html {
  --imgw: 1391;
  --imgh: 2471;
  width: 100vw;
  min-height: calc(100vw * var(--imgh) / var(--imgw));
  /* make sure the whole height of the image is always shown */
  background-image: url(https://picsum.photos/id/1015/1391/2471);
  background-size: cover;
}

HELLO