Page 56 - CSS

Simply setting a background-color with the redvalue.

background: border-box red;

Setting a background-clip to border-box and a background-color to red.

background: no-repeat center url("somepng.jpg");

Sets a background-repeat to no-repeat, background-origin to center and a background-image to an
image.

background: url('pattern.png') green;

In this example, the background-color of the element would be set to green with pattern.png, if it is
available, overlayed on the colour, repeating as often as necessary to fill the element. If
pattern.png includes any transparency then the green colour will be visible behind it.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

In this example we have a black background with an image 'picture.png' on top, the image does
not repeat in either axis and is positioned in the top left corner. The / after the position is to be
able to include the size of the background image which in this case is set as 600px width and auto
for the height. This example could work well with a feature image that can fade into a solid colour.

NOTE: Use of the shorthand background property resets all previously set background
property values, even if a value is not given. If you wish only to modify a background
property value previously set, use a longhand property instead.

Background Position

The background-position property is used to specify the starting position for a background image or
gradient

.myClass {
background-image: url('path/to/image.jpg');
background-position: 50% 50%;
}

The position is set using an X and Y co-ordinate and be set using any of the units used within
CSS.

Unit Description

A percentage for the horizontal offset is relative to (width of background
positioning area - width of background image).
value%
A percentage for the vertical offset is relative to (height of background
value%
positioning area - height of background image)
The size of the image is the size given by background-size.

https://riptutorial.com/ 34