CODEWITHSUNDEEP
cssresponsive
Alexa
Alexa

Reputation: 21

How to make background-image responsive?

I am trying to make background-image of .panda_section_wrapper responsive. While it finally looks good on smaller devices, it is wrong on bigger ones. It's okey that it is stretched but I would like it to also stretch the height in this case, so Image looks good on small and big screens. How can I do this?

My site: https://wandawix.github.io/online-zoo/index.html

My code: https://github.com/WandaWix/online-zoo

 <main class="main">
        <!-- Panda section ---------------------------------------------------------- -->
        
        <div class="panda_section_wrapper">
            
               <!-- <div class="panda_circle">
               </div>
               <div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div>
               
            </div>
            <div class="btn btn_watch">
                <button class="btn">Watch online</button>-->
               
        </div>

 .panda_section_wrapper {
    /* max-width: 1600px;
    background-color: pink;
    background-image: url(img/GiantPanda.png);
    height: 69vh;
    background-size: 93vw; */

    max-width: 1600px;
    background-color: pink;
    background-image: url(img/GiantPanda.png);
    height: 25vh; /*min(max(16px, 80vw), 60vh);*/
    background-size: 93vw;
    max-width: 1600px;
    background-color: pink;
    background-image: url(img/GiantPanda.png);
    background-size: 93vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-size: 100%;
    background-size: 100% 100%;
    
  }

  .panda_section_container {
    max-width: 1160px; 
    height: 100%;
    margin: 0 auto;
   
  }
  .panda_circle {
    position: relative;
    width: 40vw;
height: 50vh;
    left: 33%;
    top: 0%;
    background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
    border-radius: 50%;
  }

Upvotes: 0

Views: 68

Answers (1)

Farhad Faraji
Farhad Faraji

Reputation: 147

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

Upvotes: 1

Related Questions