Building a full-screen background image using HTML and CSS

Building a full-screen background image is a popular and eye-catching design element that can be easily achieved using HTML and CSS. This technique is often used in landing pages or as a background for a website header. In this article, we'll go over the steps to create a full-screen background image in your website.

Adding the HTML structure

To start, we need to add a basic HTML structure to our page. We'll add a container div to hold the background image and a few heading tags to add some text.

<body>
  <div class="container">
    <h1>Welcome to my website</h1>
    <p>This is a full-screen background image</p>
  </div>
</body>

Adding the CSS styles

Next, we'll add the CSS styles to our HTML file. This is where we'll set the size and position of our background image and style the text.

<style>
  .container {
    background-image: url(bg.jpg);
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  h1 {
    color: #fff;
    font-size: 36px;
  }

  p {
    color: #fff;
    font-size: 18px;
  }
</style>

In this CSS code, we use the background-image property to set the background image, url(bg.jpg). The height property is set to 100vh, which means 100% of the viewport height, to ensure the background image covers the entire screen. The background-position property is set to center to center the image horizontally and vertically. The background-repeat property is set to no-repeat to prevent the image from repeating. The background-size property is set to cover to make the image cover the entire container div. The display property is set to flex to center the text both horizontally and vertically within the container. The text-align property is set to center to center the text within the container.

Adding the background image

Finally, we need to add the background image. You can either use an image from your computer or a URL to an image hosted online. In this example, we've used a local image named bg.jpg. Make sure to replace the URL in the background-image property with the correct location of your image.

Conclusion

Creating a full-screen background image is a great way to add a visual element to your website. By using HTML and CSS, you can easily set up a full-screen background image that will automatically adjust to the size of the user's screen. Whether you're a beginner or an experienced developer, this technique is a simple way to make your website stand out.

Next: Using HTML and CSS to create a print-friendly stylesheet

/ @kheersagar / Building a full-screen background image using HTML and CSS

Building a full-screen background image using HTML and CSS

Adding the HTML structure

Adding the CSS styles

Adding the background image

Conclusion

You may also like

Creating a Lightbox Effect for Images Using HTML, CSS, and JavaScript

Building a responsive testimonial grid with HTML and CSS

Building a Responsive Image Gallery with HTML, CSS, and JavaScript