CSS Background Image

The CSS Background Image property along with an image file allows us to use an image as our background.

We’ve taken the icon out of our logo and placed it as the background of this page!

You can use a large file that repeats only once or a small image file, like a pattern, that repeats multiple times as the background of a web page.

The smaller the image size the better – this is particularly important to keep our loading times to a minimum, which is becoming more and more popular as a ranking factor for organic Google Search.

For repeating a single image in a, b, or both a and b directions, the background-repeat property can be used to either repeat, repeat-a, or repeat-b.

For a better understanding, lets walk through an example.

The first line of this code would load the bg-image.jpg file and set it as the background of the web page.

body {
background-image: url(bg-image.jpg);
background-repeat: repeat;
}

To command the browser to repeat the chosen image in both a and b directions so that it fills up the whole web page, the second line defining the background-repeat property is used.

There are a few more incredibly helpful background properties you should know.

In these properties the values can be either scroll or fixed.

In the case of fixed, the background image remains stationary behind everything else on the web page.

In this situation, scrolling down the page would have no impact on the image, and it would stay attached to the top of the page.

In contrast, if you use scroll, the background image stays attached to the same place on your browser window.

That means scrolling down the page will also see the background image moving downward too.

The background-position property is used to set a background image’s starting point.

For this property, you must specify both an X and Y value.

For the X value, you can choose either left, right, center, a px or % value.

On the other hand, the Y value can either be top, bottom, center, or a px or % value.

If we use all these properties together, our background image styling will look something like the following:

body {
background-image: url(bg-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}

This CSS property might look quite confusing to you at first, but once you get used to it, it becomes highly intuitive.

You can also use a shorthand property to combine the above.

We’ve added color in as well in the shorthand below just so you get the full picture of the shorthand as your background image may not cover the entire background:

body {
background: #330000 url(/wp-content/uploads/2020/06/bg-image.jpg) repeat fixed top center
}

This is the exact code that this page is using.

The order for the background shorthand property is as follows and details for each background property are outlined below as well.

1. Background-Color
Defines the color of the background however if you’re using an image the color won’t be seen.

2. Background-Image
Defines the file location of the image.

Values
url(path to file goes here)

3. Background-Repeat
Defines whether the background repeats, and if so, how you want it to repeat.

Values
repeat: will repeat horizontally and vertically
repeat-x: will repeat horizontally
repeat-y: will repeat vertically
no-repeat: will not repeat

4. Background-Attachment
Defines whether the background image scrolls or not.

Values
scroll: (default) background will move with rest of page
fixed: background is fixed

5. Background-Position
Defines where the background image will start.

Values
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
[x% y%] – horizontal and vertical position starting point of the image, defined as a percentage, i.e. a 20% x means it will start 20% down the image (not the page)
[xpos ypos] – horizontal and vertical position defined using pixels or ems