How to Add Subtle Image Overlays to Your Sectional Components

Using visual elements such as background images on your website is crucial for branding. Sometimes rather than using a busy background image, you may want to use a background image that doesn't overwhelm the text content on a section but rather adds a subtle touch in a way that emphasizes your brand and prevents the section from looking boring. In this tutorial, we'll show you how to add a subtle background image to your web page section using Bootstrap HTML and CSS.

Getting Started

The links below are the external Bootstrap files. Copy and paste them in the head section of your HTML file:

HTML

Our HTML code below is very simple and barebones. For the purpose of this tutorial, we kept the HTML structure and text simple to focus on the background image. It has a section container tag and the standard Bootstrap container and row grid structure. Copy and paste it in your HTML file and feel free to alter the content in it.

CSS

This is where all the work happens. Before we go over the CSS code, it's important to keep in mind the background picture you use changes the way CSS code needs to be written.

There are two ways of customizing your background image: by an image editing program or by CSS. For the background image to be subtle, it mostly needs to blend in with the background of your section mainly via the background color. For example, if you have a gray background image element, using a black background in your section will make the image blend in nicely but using a white background color with a black background image will make the element stand out too much.

Using lower opacity levels also helps a lot. The more transparent an image is, the more it will blend in with the background and be subtle. If you have the tools, you can adjust the color and the transparency level of your image and rotate it by using an image editor. If not, we can show you how to do that with CSS. Below is the entire CSS for our background image:

In the code above, we created a pseudo element for the background image. Why? Because when you attach a background image via the CSS, and you change the opacity of the background, the entire section's background opacity instead of just the image. You don't want that because the text and the other elements in your section will also be harder to see. So we add the image in the pseudo element and set the opacity to our desired level, in our case less than 0.1. You can change the opacity value for your own image. In CSS, the opacity property has a value range between 0 and 1 with 0 being fully transparent (invisible) and 1 being fully opaque. Since the background image we used had a very dark gray outline, we set the opacity level very low. 

Then we set the background size. This value will change the size of your background image. Then we position the image by first setting its positioning value to absolute so that we can place the image wherever we want in the section. Giving an element absolute positioning in a section or a component will make it independent than the other elements in that section.

After we set it to absolute positioning, we use the background-position property and set it to 100% bottom, meaning it will be 100% on the right side (0% will place it on the left side) and at the bottom. Again, feel free to adjust these positioning values for your own project.

If you look at the JSFiddle example below, our image is rotated about 45°. You can rotate your image using an image editor but if you'd like to do that with CSS, you can simply use the transform property to rotate it using the rotate() function. Here's an example of how to rotate an element with a classname of .rotated:

.rotated {
  transform: rotate(45deg);
}

And there it is. Check out the JSFiddle below to see how it looks before committing to its use