CSS Background Color And Background Image

CSS Background Color And Background Image

The CSS background color and background image properties is used to provide background effect of the HTML element. These effect might be element's background color, element's background image and element's background-image positioning ,etc.

Background properties are- background-color, background-image, background-repeat, background-attachment, background-position, background(shorthand property)

Note: Keep in mind that CSS background is used to provide the background effect to the HTML element.

Followings are the background properties like background-color,background-image,background-repeat,background-attachment,background-position.

CSS Background Color

CSS background-color property is used to specify the background color of the elements.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example, CSS background color is used to provide a background effect around the HTML element.

CSS Background Color With Opacity

The opacity is used to set the transparency of an element.Opacity value is exist within 0 to 1.Opacity lower value zero(0) indicates most transparent while as max value(1.0) indicates full color.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example, the CSS opacity feature is used. It indicates the transparency of an element. Opacity minimum value zero indicates the most transparent color while max value one indicates full color.

CSS background-image

CSS background-image property is used to specify background image of the element.

Please keep in mind that background image of the element is by default repeated itself to cover entire element.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Please keep in mind that CSS background concept is used to provide background image around the HTML element.

CSS Background Repeat

The CSS background-image property is repeated background image horizontally and vertically. The CSS background-repeat property is provided different values. These are background-repeat: no-repeat, background-repeat: repeat-y, background-repeat: repeat-x, background-repeat: repeat

Source Code

Try it now

Code Explanation

Note: Please keep in mind that CSS background is repeated itself to horizontally x-axis & vertically y-axis.Therefore,CSS background-repeat property controls the background image repeatation.

CSS background-position

The background-position property is used to denote the position of the background image that is applied to the element.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Please keep in mind that CSS background position specifies the background image position.

Online Test / Quiz