How to Create Perfect CSS background images?

In this article, we collected the most important CSS background image settings that affect the background of websites. What properties can we define, and what values can these properties take?

Single-colored backgrounds − CSS background color

The color of the background can be defined using the background color property. This can be used to set a single color for the background, but it can also be useful when we have a background image that doesn’t fill the whole screen. In that case, we can add color to the rest of the screen with this property. You can read more about defining colors and color codes in this article.

In the example below, we used hexadecimal values to set the background color, and one of the standard color names to set the color of the text. Since these properties need to apply to the whole website, they have to be placed after the body selector.

 

 

Setting the background color of elements (tables, text boxes, etc.)

It can be done in the same way as above, but in the CSS code, we have to add the property to the selector that belongs to the element we want to change. If we want to change the background color of the table, we have to place the background color property after the table selector.

 

Adding a CSS background image

You can set an image to be the background of the website or an element (e.g., a div or a table) with the background image property. You also have to define the access path of the image, e.g., a URL or a folder the image is in.

Adding a background image

Scaling the CSS background image – CSS background-size

We can define the size of a background image with the background-size property, in pixels or in percentages relative to the size of the whole screen.

Scaling the background image

If we want an image to always fill the whole background, we can add the “cover” statement instead of exact sizes – we have to be careful with this, though, since this can stretch or trim our picture.

If we want to ensure that the whole image is visible at all times, we need to put the “contain” statement instead of the size. 

 

Repeating the CSS background image – CSS background-repeat

By default, the CSS background image is repeated to cover the whole website. You can see this in the example below.

Repeating background image

CSS background-repeat: no-repeat

If we want to show the background image only once, we have to add no-repeat after background repeat.

Positioning the CSS background image – CSS background-position

By default, the background image appears on the upper left side of the website. If we want to put it somewhere else, we have to use the background-position property.

We can define three values horizontally and vertically as well: left, center, right, and top, center, bottom.

Positioning the background image

Positioning the background image

CSS background image shorthands

We can define properties with shorthands in the following order:

background-color

background-image

background-repeat

background-attachment

background-position

If we leave out a property, the statements will still be valid if the rest of the properties are in the correct order.

So the following properties, for example:

background-color: #000;

background-image: url(images/bg.gif);

background-repeat: no-repeat;

background-position: left top;

Can be defined in a single line:

background: #000 url(images/bg.gif) no-repeat left top;

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

• How to create perfect HTML tables?
• HTML color codes
• CSS background images

Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.