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.
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
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.
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.
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.
This is all great. We deserve one more example for a commonly used background image styling.
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.