Full-Screen Background Image with CSS

Do you want to create a stunning full-screen background image with just CSS? In this quick guide, here we'll show you how.

Start by creating a basic HTML structure for your webpage. You can include any content you want to overlay on top of the background image.

<div class="bgimg">
  <div class="caption">
    <span class="border">FULL PAGE</span><br>
    <span class="border">BACKGROUND IMAGE</span>
  </div>
</div>

Inside the .bgimg container, we have another <div> with the class caption. The caption div is used to place text over the background image. Inside the caption div, we have two <span> elements with the class border, displaying the text "FULL PAGE" and "BACKGROUND IMAGE".

Now, let's break down the CSS properties for the .bgimg class:

.bgimg {
  background: url('bg-img.jpg') no-repeat center center;
  background-size: cover;
  height: 100%;
  position: relative;
  opacity: 0.65;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

• Background Image: background: url('bg-img.jpg') no-repeat center center;
  • The no-repeat value ensures the image doesn't repeat.
  • center center aligns the image in the middle of the viewport.
• Background Size: background-size: cover;
  • Ensures the image covers the entire container.
  • Adjusts the image size to maintain its aspect ratio.
• Height: height: 100%;;
  • Stretches the image to the full height of the viewport, ensuring it covers the entire screen.
• Position: position: relative;
  • Allows us to position child elements within this container.
• Opacity: opacity: 0.65;
  • Adds a subtle transparency to the background image, giving it a soft overlay effect.

The result is a beautiful, full-screen background image that scales perfectly with the viewport.

Thanks for reading! Don't forget to like and subscribe for more quick web development guides.

By following this guide, you will be able to create an eye-catching full-screen background image with ease. Experiment with different images and styles to make your web pages stand out!