Image 100% of the screen (before scrolling)

Question

The home page of my website has 4 sections. The first section heree is just a background image with some text. However, according to your screen size, the section does not take 100% of the screen and as a consequence there is some white space at the bottom. Would it be possible to have the section .intro take 100% of the screen space before the user scroll down?

HTML

<div class="intro">
    <div class="container">
        <div class="content">
            <h1>Myanmar's Leading Provider of Total HR Solutions</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit dignissimos blanditiis veritatis quidem voluptate minus laboriosam magnam tempora dolorem repellendus!</p>
            <a href="search/search.php"><button class="button-1">Candidates</button></a>
            <a href="contact/employer-contact.php"><button class="button-2">Employers</button></a>
        </div>
    </div>
</div>

CSS

.intro .container{
   background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.55)),url(./images/home/myanmar.jpg)no-repeat center center/cover;
   padding:1.4rem;
}

Possible duplicate of [CSS Units - What is the difference between vh/vw and %?](https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and) — A. Meshu, Sep 29 '19 at 21:10

score 0 · Answer 1 · answered Sep 29 '19 at 21:08

background-size is for resizing a background-image. The <div> of the background must have an height to see the background image. Padding on a background is not possible, padding on class intro will affect the size of class container

<body>
  <div class="intro">
    <div class="container">
      <div class="content">
        ....
      </div>
    </div>
  </div>
</body>

html, body {
  height: 100%;
  margin: 0;
}
body > .intro {
  width: 100%;
  min-height: 100%;
  padding: 1.4rem;
  background-image: url(./images/home/myanmar.jpg);
  background-repeat: no-repeat;
  background-size: ..... ;
}

background-size

auto : background in original size (default)
cover : resize the background, edges stretch/cut a little bit
contain : resize the background and make it fully visible
100% : width 100%, height auto
100% 100% : width 100%, height 100%

Image 100% of the screen (before scrolling)

1 Answers1