CODEWITHSUNDEEP
htmlcssimagebackground-image
Gabriel
Gabriel

Reputation: 9

Background Image does not display full image

I've been trying to fix my background image so that the full image shows its full size. As of now the image display, but it looks like it is zoomed in. I played around with the css and re-sized the image several times but nothing worked. Currently using this template: http://www.tooplate.com/view/2076-zentro

HTML:

    <!-- home section -->
    <section id="home" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <h1>Cozinha Bomtempo</h1>
                    <h2>CLEAN &amp; SIMPLE DESIGN</h2>
                    <a href="#gallery" class="smoothScroll btn btn-  default">LEARN MORE</a>
                </div>
            </div>
        </div>      
    </section>

CSS:

    #home {
      background: url('../images/telma1.jpg') 50% 0 repeat-y fixed;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
      color: #ffffff;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      height: 100vh;
      text-align: center;
    }

Upvotes: 0

Views: 6277

Answers (2)

citrusy
citrusy

Reputation: 161

Both cover and contain resize the image to fit the window. To truly be full size, you need

background-size: [image width]px [image height]px;

To always fit the parent element instead, use

background-size: 100% 100%;

Upvotes: 4

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

If you don't have to make sure anything about aspect ratio of background, go for background-size:100% 100%; else go for background-size:contain

Upvotes: 0

Related Questions