0

On my desktop my background image fits perfectly and its responsive even when i make the window smaller. When i open it up on my mobile device the image hasn't changed and it's really zoomed in. how can i fix this? This is my current code in css

.welcome-area{
    background-image: url(../images/13/Dr-Teals-Banner.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100vh;
  }

This is my html Code:

 <section class="welcome-area text-center" data-scroll-index="1">
          <div class="overlay-bg-65 flex-center med-padding">
              <div class="container">
                  <div class="welcome-text">
                      <img src="images/logo-animation/logo.gif"><br><br><h5 class="color-ddd fw-400">DR TEAL'S</h5>
                      <h1 class="mb-20px color-fff fw-100 cd-headline clip">

                          <span class="cd-words-wrapper">
                              <b class="is-visible color-gold">Graphic Designer</b>
                              <b class="color-gold">Branding</b>
                              <b class="color-godl">Print</b>
                              <b class="color-gold">Photography</b>
                              <b class="color-gold">Digital</b>
                          </span>
                      </h1>
                      <h6 class="color-ddd fw-400 mb-30px">2019-Present</h6>
                      <a href="https://instagram.com/edisson.alberto/" class="color-fff color-blue-hvr mr-15px"><i class="fa fa-instagram"></i></a>
                      <a href="https://www.linkedin.com/in/edissonhidalgo" class="color-fff color-blue-hvr"><i class="fa fa-linkedin"></i></a>
                  </div>
                  <a href="#" class="color-fff fs-35 p-absolute scroll-bottom-btn" data-scroll-nav="2"><i class="fa fa-angle-down"></i> </a>
              </div>
          </div>
      </section>
Jstillos
  • 1
  • 2
  • 1
    Does this answer your question? [Fit website background image to screen size](https://stackoverflow.com/questions/19925075/fit-website-background-image-to-screen-size) – Dokksen Aug 12 '20 at 10:01

1 Answers1

1

You have set your min-height:100vh, which means it will always fill up the full height and therefore zoom into the picture.

If you want the image to scale proportionally set the width: 100%

Nico
  • 157
  • 1
  • 15
  • i tried but it didn't work managed to us this and it seems to work ' height: 100%; width: 100%; background-size: cover; background-position: center; //for browser compatibility -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; } ' – Jstillos Aug 12 '20 at 12:04