Create A Fixed Background Image Using Css

To create a fixed background image using CSS, you can use the background-attachment property. The background-attachment property specifies whether the background image should scroll with the content or remain fixed relative to the viewport. To achieve a fixed background effect, set the background-attachment property to fixed. Here’s an example:

First Step : Create The Html Structure

So we have this small code in our html document, we will apply the background image using Css and then we will add

Html
<div class="main-section">
      <h3>this heading</h3>
	<main> you can add any content you wish here in this section </main>
</div>

Next Step : Add Css To Create The Fixed Background Image

Remember to use your own background image path when you copy the Css code below

Css 

.main-section {
      width: 100%;
      height: 100vh;
      background-image: url('./images/IMG_20190701_205045.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
  }
    h3 {
      color: white;
      text-align: center;
      font-size: 2rem;
      text-transform: capitalize;
    }

Create A Fixed Background Image — ***Result***

This is my background with a simple heading (h3) text. Your own background may not appear the same because we are using different image but with those properties which we have added, you should have a fixed background image.

Code Explanation

In this example, the .main-section class represents the section to which you want to apply the fixed background image.

Background Image

To add the background image, we use the background image property and specify the image path or URL to the image you want to use as the background. Change the ‘image_path’ to the actual path or URL of your desired image.

Background Size

The background-size property is set to cover to ensure the background image covers the entire container element. The background-position property is set to center so that we can horizontally and vertically center the background image within that section.

The key property for creating the fixed background image effect is “background-attachment: fixed;”. This property ensures that the background image remains fixed relative to the viewport, and with that, we can create a “parallax” or “sticky” effect as the content within the container scrolls.

You can apply the .main-section class to any HTML element that you want to have a fixed background image.

Recommendation

Add Background-overlay: Notice how bright the background image is, the text is somehow struggling to be more visible. You can reduce the brightness of the background image by adding background overlay which you can learn by following that link.

This is just one guide on how you can Create A Fixed Background Image. There might be many more ways to achieve that but hopefully this gives you a good idea. Ensure you can adjust the CSS styles, container class name, and HTML structure as needed to fit your specific requirements.