- Single-colored backgrounds − CSS background color
- Adding a CSS background image
- Scaling the CSS background image – CSS background-size
- Repeating the CSS background image – CSS background-repeat
- CSS background-repeat: no-repeat
- Positioning the CSS background image – CSS background-position
- CSS background image shorthands
- Learn to code and change your career!
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.
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.
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.
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.
CSS background image shorthands
We can define properties with shorthands in the following order:
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-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.
Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.