CSS Backgrounds

CSS backgrounds property is used to control the background effect of the HTML element. These background effects will be:

  1. Background clipping
  2. Multiple backgrounds of the element
  3. Controlling background size around the HTML element.

CSS3 Background Properties

Followings are the properties of CSS3 backgrounds:

Background Property Value
background-color: It is used to provide background color.
background-image: It is used to provide a background image or gradient around the HTML element.
background-repeat: It has the followings values repeat (default), no-repeat, repeat-x, repeat.
background-position: It is used to set the background-position of the image.
background-attachment: It has followings values: scroll(default), fixed
background-size: It has followings values: auto( default), cover, contains.
background-origin: It has followings predefined values: padding-box(default), content-box and border-box.

CSS Background Color

CSS background-color property is used to set the background color of the HTML element. Color can be represented by hexadecimal code, RGBA values, HSL values, and actual color names.

General Syntax

Try it now

Source Code

          body {
  background-color: slateblue;

h2 {
  color: white;
  font-size: 2em;
Try it now

CSS Background Image

The CSS background-image property is used to set the background image at the background of the HTML element.

General Syntax

Try it now

Source Code

 background-image:  url('../sliderimages/1.jpg');
Try it now

Web Tutorials

CSS Backgrounds
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4