diff --git a/_includes/collections/backgrounds.html b/_includes/collections/backgrounds.html index 76dc8ed3..c2083309 100644 --- a/_includes/collections/backgrounds.html +++ b/_includes/collections/backgrounds.html @@ -1 +1 @@ -

#background-attachment

Defines how the background image will behave when scrolling the page.

default background-attachment: scroll;

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

background-attachment: fixed;

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

#background-clip

Defines how far the background should extend within the element.

default background-clip: border-box;

The background extends completely throughout the element, even under the border.

background-clip: padding-box;

The background only extends to the edge of the border: it includes the padding but not the border.

background-clip: content-box;

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

#background-color

Defines the color of the element's background.

default background-color: transparent;

By default, the background color is transparent, basically meaning that there is no background color.

background-color: red;

You can use one of the 140+ color names.

background-color: #05ffb0;

You can use hexadecimal color codes.

background-color: rgb(50, 115, 220);

You can use rgb() color codes:

  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

background-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

background-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%

background-color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

#background-image

Defines an image as the background of the element.

default background-image: none;

Removes any background image.

background-image: url(/images/jt.png);

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

background-image: linear-gradient(red, blue);

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

background-image: linear-gradient(45deg, red, blue);

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

background-image: radial-gradient(green, purple);

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at the edges.

background-image: radial-gradient(circle, green, purple);

You can specify the shape of the radial gradient: circle or ellipse (default).

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

You can specify color stops using percentage values.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

You can specify where the gradient should end:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

Like with the background-position, you can specify the position of the gradient.

#background-origin

Defines the origin of the background image.

default background-origin: padding-box;

The background image starts at the edge of the border: within padding but not the border.

background-origin: border-box;

The background image starts under the border.

background-origin: content-box;

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

#background-position

Defines the position of the background image.

default background-position: 0% 0%;

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

background-position: bottom right;

You can use a combination of position keywords: center, top, bottom, left and right.

background-position: center center;

The background image will be positioned in the center of the element.

#background-repeat

Defines how the background image repeats itself across the element's background, starting from the background position.

default background-repeat: repeat;

The background image will repeat itself both horizontally and vertically.

background-repeat: repeat-x;

The background image will only repeat itself horizontally.

background-repeat: repeat-y;

The background image will only repeat itself vertically.

background-repeat: no-repeat;

The background image will only appear once.

#background-size

Defines the size of the background image.

default background-size: auto auto;

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

background-size: 120px 80px;

You can specify a size in pixels:

  • the first value is the horizontal size
  • the second is the vertical size

background-size: 100% 50%;

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

background-size: contain;

The keyword contain will resize the background image to make sure it remains fully visible.

background-size: cover;

The keyword cover will resize the background image to make sure the element is fully covered.

#background

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.

\ No newline at end of file +

#background-attachment

Defines how the background image will behave when scrolling the page.

default background-attachment: scroll;

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

background-attachment: fixed;

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

#background-clip

Defines how far the background should extend within the element.

default background-clip: border-box;

The background extends completely throughout the element, even under the border.

background-clip: padding-box;

The background only extends to the edge of the border: it includes the padding but not the border.

background-clip: content-box;

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

#background-color

Defines the color of the element's background.

default background-color: transparent;

By default, the background color is transparent, basically meaning that there is no background color.

background-color: red;

You can use one of the 140+ color names.

background-color: #05ffb0;

You can use hexadecimal color codes.

background-color: rgb(50, 115, 220);

You can use rgb() color codes:

  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

background-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

background-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%

background-color: hsla(14, 100%, 53%, 0.6);

You can use hsla() color codes:

  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

#background-image

Defines an image as the background of the element.

default background-image: none;

Removes any background image.

background-image: url(/images/jt.png);

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

background-image: linear-gradient(red, blue);

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

background-image: linear-gradient(45deg, red, blue);

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

background-image: radial-gradient(green, purple);

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at the edges.

background-image: radial-gradient(circle, green, purple);

You can specify the shape of the radial gradient: circle or ellipse (default).

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

You can specify color stops using percentage values.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

You can specify where the gradient should end:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

Like with the background-position, you can specify the position of the gradient.

#background-origin

Defines the origin of the background image.

default background-origin: padding-box;

The background image starts at the edge of the border: within padding but not the border.

background-origin: border-box;

The background image starts under the border.

background-origin: content-box;

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

#background-position

Defines the position of the background image.

default background-position: 0% 0%;

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

background-position: bottom right;

You can use a combination of position keywords: center, top, bottom, left and right.

background-position: center center;

The background image will be positioned in the center of the element.

#background-repeat

Defines how the background image repeats itself across the element's background, starting from the background position.

default background-repeat: repeat;

The background image will repeat itself both horizontally and vertically.

background-repeat: repeat-x;

The background image will only repeat itself horizontally.

background-repeat: repeat-y;

The background image will only repeat itself vertically.

background-repeat: no-repeat;

The background image will only appear once.

#background-size

Defines the size of the background image.

default background-size: auto auto;

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

background-size: 120px 80px;

You can specify a size in pixels:

  • the first value is the horizontal size
  • the second is the vertical size

background-size: 100% 50%;

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

background-size: contain;

The keyword contain will resize the background image to make sure it remains fully visible.

background-size: cover;

The keyword cover will resize the background image to make sure the element is fully covered.

#background

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.