How to set a background image of a site?

Introduction

If you still have problems with how to set a background image to a web page, you can find this article useful. It can help you to set and customize an image as a background or just fill the background with any solid color.

Powerful CSS

As you can see, setting of the background will be performed by adding CSS styles to an element. The background property is responsible for it. If you need to add a background to any specific element, then use CSS property for its identificator or class. If you want to do this for the whole web page, then use CSS property for the body element or for the page container class/identificator. On all examples bellow the body element will be used for demonstration.

Filling by color

The easiest way is filling by any solid color. All we need is a color code and the background-color property.

 body {
  background-color: #000; /* Filling by the black color */
 } 

This code will allow you to set a black solid background for your web site. Any other color can be used here, you just need to change the color code to any you want.

Don't forget that background color and the text color must contrast enough to render readability. Use the color property to change the text color.

 p {
  background-color: #000; /* Filling by the black color */
  color: #fff; /* White text for black background */
 } 

Background image

You can also use an image for the background. In this case use the background-image property with a value url() that specifies the path to an image. The argument for url() is a string that may be enclosed in quotes or not. The string specifies a location at which the image can be found: url(<path>). The path can either be a full URL to the image or a partial URL. If you use a partial URL, the path is relative to the location of the document that contains the property.

It is recommended to have a separate folder for all images and specify the absolute path (full URL) to the file, from the root folder. This will improve the structure of your site and will not cause problems if you decide to change the location of the CSS file.

 body {
  background-image: url(/images/background.png); /* Absolute path to the background.png file */
 } 

If you use an image, it is good to specify a background color in case the image is unavailable or user disabled images. When the image is available, it overlays the background color because the background image is always displayed on top of the background color.

 body {
  background-image: url(/images/background.png); /* Absolute path to the background.png file */
  background-color: #ab11cf; /* Filling by the specific color */
 } 

Two properties from the example given above can be combined into one, using the property background.

 body {
  background: #ab11cf url(/images/background.png); /* Filling by the solid color and path to the image */
 } 

Background property

The background property allows you to set all the parameters of the background image on a single line. Consider the available options.

 background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit 

The order of values can be arbitrary, and if a property is not specified, the default value is used.

background-attachment

This property determines whether the background image scrolls along with the content of the page. If you want to fix the image, use the value fixed. In this case, the image is fixed while scrolling the page contents. If you want the image moves with the contents of the site, use the "scroll" value. Default value is scroll.

 body {
  background-image: url(/images/background.png); /* Full path to the image background.png */
  background-attachment: fixed; /* image is fixed */
  background-color: #ab11cf; /* filling by solid color */
 } 

Equivalently:

 body {
  background: #ab11cf url(/images/background.png) fixed; /* Filling color and path to the fixed image */
 } 

background-position

If you use a background image, this property specifies its initial position. It has two values, separated by a space: the horizontal and vertical position. The values can be set using the key words: "left", "right", "top", "bottom", "center". The sequence is not important. If the values are given in percent, pixels, etc., the first specified value horizontally and then vertically. The default position is set in the upper left corner (left top).

background-repeat

Its specifies the repetition of a background image. It can be repeated only horizontally (repeat-x) or only vertically (repeat-y), or both horizontally and vertically (repeat), or even no repetitions (no-repeat). Default is set to repeat.

inherit

Used to explicitly specify inheritance properties of the parent element.