two ways to set background image for a full page

SETTING BACKGROUND IMAGE FOR A WHOLE PAGE

Have you ever thought of setting a background image for the whole of your webpage? As we all know, The background of your webpage will usually gives additional beauty to your webpage; however, on most occasions many webpage do not have background or they just have the default background color of white. There might also be instances where you will need to set a background image as your background instead of just a color, doing this could sometime be tricky but it should be welcome challenge.

Assuming we have this web-page with large sum of text like

<p>lorem5000</p>

One way to set the background image for this webpage is to add the following css

body {

  background: url(“../images/contact-nurse.jpeg”);

  background-position: center;

}

repeating background image

 If you have your image properly selected and your css is the same as the one above, then your webpage should have a background image set as its background. But there is a little problem which is; the background image is repeating and that’s not a good design practice. so how do we fix this? well, you can add width and height to the body as shown below,

body {

width:100vw;

height:100vh;

  background: url(“../images/contact-nurse.jpeg”);

  background-position: center;

background-size: cover;

background-repeat: no-repeat;

}

and you result should be better like the one shown below

no background repeat

While this works, let me tell you the down side, how will you know the exact height of your whole webpage? So that method doesn’t really make sense and that brings us to the second method of setting a background image for a whole webpage

Grab the code below as your HTML

HTML

<section id=”search-section”>

  <div>

    <h3> Search for Courses</h3>

    <div>

      <div>

        <div>

          <form>

            <input type=”text” />

            <button>Search</button>

          </form>

        </div>

      </div>

    </div>

  </div>

</section>

<button id=”btn” >submit</button>

<p>Add 5000 words here with lorem5000</p>

Next, add the following css code

CSS

body::before {

  content: “”;

  background: url(“../images/contact-nurse.jpeg”);

  position: fixed;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: 100%;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  z-index: -1;

}

With the above line of codes in your css you can have a responsive background for your entire webpage, You can also learn more on how to use ::before and ::after selector

Leave a Comment

Your email address will not be published. Required fields are marked *