The CSS Backgrounds Tutorial | Properties, Values, Syntax & Example Programs on Backgrounds in CSS

The CSS background property permits you to control the background of any element (what paints underneath the content in that element). Background property in CSS is a shorthand property, which means that it provides you to communicate what would be various CSS properties in one.

Constituent Properties of CSS Background

The background of an element can be changed using several CSS properties:

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

Syntax

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

The backgroundproperty is defined as one or more background layers, divided by commas.

The syntax of each layer is as regards:

  • Each layer may consist of zero or one occurrence of any of the following values:
    <attachment>
    <bg-image>
    <position>
    <bg-size>
    <repeat-style>
  • The <bg-size>value may only be covered immediately after<position>, separated with the ‘/’ character, like this: “center/80%”.
  • The <box>value may be included zero, one, or two times. If included once, it hovers bothbackground-originandbackground-clip. If it is included twice, the first occurrence sets background-origin, and the second sets background-clip.
  • The<background-color>value may only be involved in the last layer specified.

Possible Values of CSS Backgrounds

Background in CSS is a shorthand property and stand for the following. This value will vary depending on the actual property.

background-color Sets a solid color for the element’s background, padding, and border background.

background-image − Defines the location of an image to be placed in the element’s background.

background-repeat − Sets a repeat direction for an image in the element’s background.

background-attachment − Sets an attachment state for any images in the element’s background.

background-position − Sets a position for the original image in the element’s background.

background-clip − Specifies the painting area of the background images

Do Check:

CSS background-color

body {
  background-color: cyan;
}

With CSS, a color is most often specified by:

  • a valid color name – like “blue”
  • a HEX value – like “#ffffff”
  • an RGB value – like “rgb(0,0,255)”

You can set the background color for any HTML elements:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

CSS background-image Property

This is used to change the background image of a page, generally from paperwhite to any image (or gif) of your choice.

body {
 background-image: url("peep.jpeg");
 background-color: cyan;
}

CSS background-position Property

How to position a background-image, (with CSS Syntax)

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
background-position: value;

How to position a background-image using percent?

body {
  background-image: url('peep.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

CSS background-origin Property

Let the background-image start from the upper left corner of the content:

.e {
  border: 10px solod black;
  padding: 20px;
  background: url(img.jpeg);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS background-repeat Property

Repeat a background-image only horizontally:

body {
  background-image: url("img.jpeg");
  background-repeat: repeat-x;
}

CSS background-size Property’

Specify the size of a background-image with “auto” and in pixels:

.e1{
  background: url(img1.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

.e2{
  background: url(img2.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

CSS background-attachment Property

A background-image that will not scroll with the page (fixed):

body {
  background-image: url("img.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}