Make Images Backgrounds using CSS

We have a previous blog on how to make images background using CSS by Valentin Garcia, but we wanted to update and expand upon the topic.

In this post, we’ll talk about the background-size property and explore some other nifty background image properties that can help with our design.

Let’s get started!

First, let’s make a basic div for us to work with and add a background-image. Also, we will add a bg-div class to all of the divs to add in height via styling. Use the bg-div class for all of the example divs.

.bg-div{  width: 100%;  height: 300px; 
} 
.backrepeat{ background-image: url("/images/blog/coding/backgroundimages/backrepeat.png"); 
}

Ok, so now we have a basic repeating background. A lot of times we might not want to have the background repeat. We can control this with background-repeat.

.backposcenter{
 background-color: #fcfcfc;
 background-image: url("/images/blog/coding/backgroundimages/backposcenter.png");
 background-repeat: no-repeat;
 background-position: center center;
}

In the above code, we styled it so the background image does not repeat and we positioned it in the center vertically and horizontally.

We can quickly position the background image as we wish with a combination of left, right, center, top, and bottom as seen below.

.backpos{
 background-color: #fcfcfc;
 background-image: url("/images/blog/coding/backgroundimages/backpos.png");
 background-repeat: no-repeat;
 background-position: top right;
}

Let us use all of these previous properties for a simple banner image, and then we will do the same styling with a shorthand property.

.backbanner{
 background-image: url("/images/blog/coding/backgroundimages/backbanner.png");
 background-repeat: no-repeat;
 background-position: top left;
}

We now have a banner background. As promised, we will make another banner with the background property. It is a shorthand for all the previous properties used so far, and more.

.backshorthand{
 background: url("/images/blog/coding/backgroundimages/backshorthand.png") no-repeat top left;
}

---

This is all great. We deserve one more example for a commonly used background image styling.

.backfixed{
 background: url("/images/blog/coding/backgroundimages/backfixed.png") no-repeat top left;
 background-attachment: fixed;
 background-size: cover;
}

This example adds in background-attachment so we can have our background image fixed, not scroll with the browser, and have our background-size set to cover.  No matter where the div is on the viewport, there will always be a part of the image visible because the image now fills the browser.

Here is a link to this exercise recreated on CodePen for everyone to try out all the background properties worry free.