JavaScript Tutorial

CSS Background

Background properties play an important role in the visual presentation of a web page. CSS provides several properties for styling the background of an element, including setting the background color, placing background images, controlling their repetition and positioning, and managing their attachment to the viewport.

The background properties are background-color, background-image, background-repeat, background-attachment, and background-position.

 

Background Color

This property is used to set the background color of an element.

Color values in CSS are most often specified in the following formats:

  • a color name - like "red"
  • a HEX value - like "#ff0000"
  • RGB value - like "rgb(255, 0, 0)"

Input:-

 

Output:-

 

Background Image

The background-image property sets an image as the background of an HTML element. When applying a background image to an element, ensure that the chosen image does not impact the readability of the element's text content. For example, if an element has a black background color, avoid using black text color as it would negatively affect visibility.

Input:-

 

 

Output:-

 

Background Repeat

The background-repeat property enables control over how a background image is repeated or tiled in the background of an element. It offers options to repeat the image vertically (y-axis), horizontally (x-axis), in both directions or not at all.

The property values include "repeat" (default for both axes), "no-repeat" (image is not repeated), "repeat-x" (image is repeated horizontally), and "repeat-y" (image is repeated vertically).

Input:-

 

Output:-

Input:-

 

Output:-

 

Background Position

The background-position property is utilized to control the placement of the background image. If no specific background position is specified, the image will be positioned at the default top-left position of the element, which corresponds to the upper-left corner.

Input:-

 

Output:-

Note: If two values are specified for the background-position property, the first value represents the horizontal position, and the second represents the vertical position. If only one value is specified, the second value is assumed to be center.

 

Background Attachment

The background-attachment property determines how the background image behaves in relation to the viewport and the containing block. It controls whether the background image remains fixed in place (fixed), scrolls along with the content (scroll), scrolls with the containing block (local), or inherits the behavior from its parent element (inherit).

 

Background Shorthand Property

In the examples provided earlier, we observed multiple properties related to backgrounds. However, it is possible to specify all these properties using a single shorthand property to reduce code length and avoid excessive typing.

The background property combines individual background properties, including background-color, background-image, background-repeat, background-attachment, and background-position, into a single declaration.

The syntax for using the background shorthand property is as follows:

background: color image repeat attachment position;

If the value for an individual background property is missing or not specified when using the shorthand notation, the default value for that property will be used, if available.

Input:-

 

Output:-

Note: Unlike the color property, the background properties do not inherit by default. However, the parent element's background will be visible through by default due to the transparent value of the background-color CSS property.

Go back to Previous Course