Longhand properties of CSS background

Manipulate the background - CSS Background Property

Created: 2022-10-07

The `background-color` property

property defines the background color on any element in CSS.
The property accepts any valid <color>.
A background-color extends underneath the content and padding box of the element.

The `background-image` property

Adds background-image
In the example below, we have two boxes — one has a background image which is larger than the box (balloons.jpg), the other has a small image of a single star (star.png).

.box {
  background-image: url(star.png);
}

The background-image will always be on top than background-color

Gradients data type can be applied here
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

.a {
  background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}

.b {
  background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
  background-size: 100px 50px;
}

Multiple background images

It is also possible to have multiple background images —
you specify multiple background-image values in a single property value,
separating each one with a comma.

You may end up with overlapping background images.
Last listed background image will be at the bottom of the stack

The other background-* properties can also have comma-separated values:

background-image: 
    url(image1.png), 
    url(image2.png), 
    url(image3.png),
    url(image4.png);
background-position: 10px 20px, 
                     top right;

Question: What happens when different properties have different numbers of values?
Ans: The smaller numbers of values will cycle —
Above example has FOUR background images but only TWO background-position values.
image1 will be given 1st position value
image2 will be given 2nd position value
then they will cycle back around again —
image3 will be given 1st position value,
image4 will be given 2nd position value.

The background-size property

Values for background-size: property below:

length
percentage
cover — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio.
contain — the browser will make the image the right size to fit inside the box.

The `background-position` property

uses a coordinate system in which the top-left-hand corner of the box is (0,0), and the box is positioned along the horizontal (x) and vertical (y) axes.

keyword values like

top, bottom background-position: top center;
lengths, percentages background-position: 20px 10%;

4 value syntax
background-position: top 20px right 10px;
Meaning we are positioning the background
20px from the top
10px from the right

The `background-repeat` property

used to control the tiling behavior of images.
The available values are:

no-repeat — stop the background from repeating altogether.
repeat-x — repeat horizontally.
repeat-y — repeat vertically.
repeat — the default; repeat in both directions.

.box {
  background-repeat: repeat;
}

The background-attachment property

This specifies how background-image: behaves when the content scrolls.
Takes the following values:

fixed:
1. Doesn't scroll when the page or element content is scrolled. Causes element's background to be fixed to the viewport
  Will always remain in the same position on the screen.
scroll:
1. If page is scrolled, element's background is scrolled too.
2. If the element content is scrolled, the background DOES NOT move.
  In effect, the background is fixed to the same position on the page,
  so it scrolls as the page scrolls.
local: fixes the background to the element it is set on,
1. If page and element are scrolled, both moves the background.

Longhand properties of CSS background

The background-color property

The background-image property