KandZ – Tuts

We like to help…!

CSS 5 💻 background related properties

In CSS there are several properties to customise one element's background
background-color → sets the color behind the content of the element.
it can accept color keywords like "blue", hexadecimal codes, rgb/rba and...
hsl/hsla values and also gradients backgrounds.
it sets the background color to red
background-image → sets the background for an element to an image.
It also accepts gradients
it sets the backround to a linear gradient

background-repeat → specifies how a background image will be repeated
You can use repeat, no-repeat, repeat-x, repeat-y, space, round
It sets the background to an image
It sets to repeat the background image
background-position → sets the position relative to its container
you can set one or two values for horizontal and vertical positioning
you can use left, right, top, bottom, center, and of course % percentage values
it sets the background position center horizontally and top vertically

background-attachment → specifies whether the image will scroll with the content
you can use fixed, local, scroll, initial or inherit
It sets the background image to fixed, it will not scroll with the page
background-clip → specifies the clipping region of the background...
border-box is the default value and extends to the border...
padding-box extends to the inside of the border...
and content-box extends to the content box
It sets the background image to extend to the inside of the border

background-origin → sets the positioning of the origin point. Values:
border-box sets the origin to upper left corner of the border...
padding-box sets the origin to upper left corner of padding edge...
content-box sets the origin to upper left corner of the content...
it sets sets the origin to the upper left corner of the border
background-size → controls the scaling of the background image
you can use %, px values. Also auto → original size
cover → image is resized to fully fills the container, contain → is resized to be fully visible

Leave a Reply