CSS stands for Cascading Stylesheets. And every web developer will need it. Yet, CSS can become tricky as we intend to do more complex things. In this article, we will see how to add a background to a container and style it using an overlay.
How we should think about background images
There are many reasons why we need to add backgrounds to our containers. In the world of design, backgrounds are having a more and more important place.
If we compare the websites a couple of years ago and the ones that run today, background images are one of the most remarkable changes.
Using the right background image (or color) can have a major impact on your website. It can represent your brand and the emotions you want to stir in your readers.
Yet, background images can be hard to put in place. Especially if you want to position it correctly on your website.
Some background image usages
There are many ways you can use background images. Here are some examples:
To build a hero image:
A hero image is a large banner at the top of the website. Its purpose is to showcase your brand because it’s the first thing your users notice. So it has to be a high-resolution graphic that contains your unique selling point.
We use a hero image because it takes only 50 milliseconds for a user to form an opinion about your website.
In general, we build the hero section by using a background image under the navigation bar. It can also cover the entire navigation. Here are some examples :
Background images are more and more used in email marketing and HTML email. In this case, they are applied to a container of the email or the whole email itself. One of the main advantages is that you can add more images or text to the background image. So it offers more flexibility in designing your email.
The background properties
In this section, we’ll talk about the properties that will help you build your background in CSS. There are many different ones and a shorthand. Let’s see them:
background-image
The background-image property helps you add an image to your website. You can add a background image to almost all the HTML elements but the most common is to apply it to a div.
background-color:
The background-color property helps you assign a color instead of a picture. You can specify the color property using rgba, hex or named colors.
background-repeat:
The background-repeat property helps you determine whether your background will repeat. You can repeat your background vertically or horizontally with repeat-x or repeat-y.
background-attachment:
The background-attachment will let you specify whether you want the background image to scroll with the page. This can have a huge impact as you can see in this England’s World Cup Squad example.
background-position:
By default, the background image is at the top left of the container. It’s then repeated vertically and horizontally. Yet, this is not what we want for our background. So we can use the background-position to override that default positioning. The possible values for a background-position are:
- top
- center
- bottom
- right
- left
You can even use combinations of those values to have a more precise positioning like:
top center, center right, bottom left, etc
background-size
With the background-size property, you can specify the size of the background image. Often, your image won’t fit the container size. So this property can help you fix the problem.
The background shorthand property
The background shorthand helps you group all the above properties into one. Using it, you can set the background image, repetition, attachment and position at once. Here’s an example:
body {background: gray url(“car.jpg”) no-repeat fixed center;}
The problem with creating nice backgrounds
As developers, we can know a lot of CSS properties. Yet, when it comes to implementing our knowledge as a result, it can be difficult.
In design, having a hero image and text is a great thing. But, your message can become invisible if you are trying to use a background with the same text color. Let’s see an example.
Let’s create our hero section
We create our HTML file with a navigation (using bootswatch). This will help us have a fast set up so that we concentrate on our hero section. Next, we create a div beneath the navigation and we give it a class of hero, like this:
In this case, we have a div with a class of hero. We will use this div to create our background image with CSS.
Ps: I hid the code between the <nav> </nav> tags so we can concentrate on the hero div. If you want the code source, here it is.
This is our output from now :
The div underneath the navigation only has the title. But we’ll add a background image to it. Now we can use the background-image property to add our background image to this hero div.
Let’s say we call our website “The Cactus Company”. So we will use this nice image and add some text to it. Using the background properties, we will have these rules in CSS:
And here’s our output in the browser:
.
As you can see, our text is nearly visible. This problem can happen when the background has the same color as our text. We could change the text color, of course. But what if we can find another solution? Yes, we will darken the background image instead of changing the text color.
How to darken our background image
There are many ways to add a nice overlay to our background images. But we will use the linear-gradient property. It offers a lot of flexibility and customization.
Using the linear-gradient method
The background-image can be coupled to a linear-gradient property. This adds a layer to the background. Using the rgba property, you can specify the color and opacity of the background overlay. The linear gradient in CSS is a function that can also help you create a transition between many colors (usually two).
In our example, we choose to add a simple grey filter. So we will use the linear-gradient property within the background-image:
This will make our background pack a beautiful layer like this:
Of course, you can style it as you want, modifying the opacity and the color. Here’s another pink styling. This time, the gradient starts from the top (using the ‘to bottom’ value):
Which one do you prefer? I would go for the last one :-)
Styling your hero image using the background property can be frustrating. But it can be fun as we understand the way to do it.
