The Background Property - CONTENT

The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:

background is made up of eight other properties:

• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin
• background-clip
• background-color

You can use any combination of these properties that you like, in almost any order (although the order recommended in the spec is above). There is a gotcha though: anything you don't specify in the background property is automatically set to its default. So if you do something like this:

The background will be transparent, instead of red. The fix is easy though: just define background-color after background, or just use the shorthand (e.g. background: url(...) red;)

Multiple Backgrounds

CSS3 added support for multiple backgrounds, which layer over the top of each other. Any property related to backgrounds can take a comma separated list, like this:

Each value in the comma separated list corresponds to a layer: the first value is the top layer, the second value is the second layer, and the background color is always the last layer.

Recipes

Browser Support

Support varies among the different specific properties, and each corresponding article in the Almanac has unique browser support notes. Basic single-color backgrounds and single images work everywhere though, and anything that isn't supported just falls back to the next best thing, whether that's an image or a color.

SOURCE: https://css-tricks.com/almanac/properties/b/background/
_______________

CSS: Background Property

Description

The CSS background property defines the initial position of the background-image for an element. It is a shorthand property for setting the background-color, background-image, background-repeat, background-attachment, and background-position CSS properties.

Syntax

The syntax for the CSS background property is:

Parameters or Arguments

background-color is the background color of the element. It can be one of the following:

background-image is the background image for the element. It can be one of the following:

background-repeat defines whether the background-image repeats. It can be one of the following:

background-attachment defines whether the background-image scrolls. It can be one of the following:

background-position-horizontal defines the horizontal position of the background-image. It can be one of the following:

background-position-vertical is optional. It defines the vertical position of the background-image. It can be one of the following

Note

• You can enter the values for the CSS background property in any order.
• If you set a value for background-image, it is recommended that you also set a background-color value in case the image is not available.
• If a background-position-horizontal value is provided but no background-position-vertical value is provided, the background-position-vertical will default to center.
• Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS background property has basic support with the following browsers:

• Chrome
• Firefox (Gecko)
• Internet Explorer (IE)
• Opera
• Safari (WebKit)

Example

We will discuss the background property below, exploring examples of how to use this property in CSS.

Set a Color as Background

Let's look at a CSS background example where we show you how to set a background-color.

In this CSS background example, we have set a background-color of white for the <div> tag.

Set an Image as Background

Let's look at an example where we have provided an image file to use as the background.

In this CSS background example, we have set a background-image for the <div> tag to /images/gradient.png.

It is also wise when setting the background-image to also set a background-color, in case the image is not available. Let's modify our example to add a background-color of black.

Now if the gradient.png image is not available, the <div> will still display a black background-color.

Finally, let's set the image to repeat horizontally.

We have done this by adding the repeat-x to the background property.

SOURCE: https://www.techonthenet.com/css/properties/background.php