Web Design III Concepts

CSS Background

The CSS background properties are used to define the background effects for elements.

There are various properties for the background, these are:

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

background-attachment

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed

The main values that you can assign to this property are: scroll,fixed and local.

background-clip

background-clip lets you control how far a background image or color extends beyond an element's padding or content

The main values that you can assign to this property are: border-box,padding-box and content-box

border-box - default. This allows the background to extend all the way to the outside edge of the element's border.
padding-box - clips the background at the outside edge of the element's padding and does not let it extend into the border.
content-box - clips the background at the edge of the content box.

background-color

The Background Color defines the background color of the element!

The main values that you can assign to this property are: transparent and color.

transparent - default. The background is transparent, so any colors below will show in this element instead.
color - Defines the color of the background of the element. This can take most type of color values such as HEX, RGB/A, CMYK, HSL, color names etc

background-image

The background-image property sets one or more background images for an element.

The background of an element is the total size of the element, including padding and border.

The main values that you can assign to this property are: url('URL'), none, x-gradient() and repeating-x-gradient()

url('URL') - This is the URL to the image. To specify more than one image, separate the URLs with a comma.
none - Default. No background image will be displayed.
x-gradient() - This sets a linear or radial gradient depending on what you replace x as. This will be the background image, and you would need to define at least two colors.
repeating-x-gradient() - This sets a repeating linear or radial gradient depending on what you replace x as. This will be the background image and you would need to define at least two colors.

background-origin

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

The main values that you can assign to this property are: border-box, padding-box and cotent-box

border-box - The background is positioned relative to the border box.
padding-box - Default. The backgroud is positioned relative to the padding box.
content-box - The backgroud is positioned relative to the content box.

background-position

The background-position CSS property defines the position of the background image.

The main values that you can assign to this property are: keywords (such as right, bottom, top, left, center), percentages and CSS Units

background-repeat

The background-repeat CSS property sets if/how a background image will be repeated.

The main values that you can assign to this property are: repeat[x,y], no-repeat, space and round.

repeat[x,y] - default. The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. However, if you use repeat-x or repeat-y then the background image will be repeted horizontally or vertically respectively.
no-repeat - The backgroud image is not repeated. The image will only be shown once.
space - The background image is repeated as much as possible without clipping. The first and last images are pinned to either side of te element, and whitespace is distributed evenly between the images.
round - The background image is repeated and squished or stretched to fill the space (no gaps)

background-size

The background-size property in CSS is one of the most useful - and most complex - of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases.

The main values that you can assign to this property are: auto, length, percentage, cover and contain.

auto - default. The background image is displayed in its original size.
length - Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto".
percentage - Sets the width and height of the backgroud image in percent of the parent element
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible

Conclusion

These are the main properties for the background attribute, also you can combine them all together under background instead of naming them separately.

Sources: (click on them to see them)

Web Design Concepts: Background