Posts tagged ‘background’

CSS Primer for Lightning Developers: Background Properties

There are a number of CSS properties that you can use to style Lightning Components by filling the background of HTML elements with colors or images.

A background consists of the total size of the element, which includes any padding and border spacing, but not margin spacing.

Background properties include:

  • background-color
  • background-image
  • background-position
  • background-attachment
  • background-repeat

background-color

The background-color property specifies the color that is used for the background of an element.

Possible values include:

  • A supported color name such as red, green, or blue
  • An RGB value such as rgb(255,0,0), rgb(0,255,0), or rgb(0,0,255)
  • A hexadecimal value such as #ff0000, #00ff00, or #0000ff
  • transparent – Sets the background color to transparent. This is the default value.
  • inherit – Inherits the background-color value from the parent element
  • initial – Sets the background-color value to its default

background-image

The background-image property specifies one or more images to be used for the background of an element.

When a background-image is specified, it is placed at the top-left corner of the element and repeated vertically and horizontally by default. You can use the background-position and background-repeat properties to change this behavior.

Possible values for background-image include:

  • url – A comma-separated list of URLs for images to be used for the background of an element
  • none – No background image will be used. This is the default value.
  • inherit – Inherits the background-image value from the parent element
  • initial – Sets the background-image value to its default

background-position

When a background-image is specified, it is placed at the top-left corner of the element by default. The background-position property overrides this default value and specifies the starting position of the background image in relation to the containing element.

Values for the background-position property are defined in relation to the horizontal position and the vertical position of the background image.

Possible values for background-position include:

  • left top – Left horizontal position / top vertical position
  • left center – Left horizontal position / center vertical position
  • left bottom – Left horizontal position / bottom vertical position
  • center top – Center horizontal position / top vertical position
  • center center – Center horizontal position / center vertical position
  • center bottom – Center horizontal position / bottom vertical position
  • right top – Right horizontal position / top vertical position
  • right center – Right horizontal position / center vertical position
  • right bottom – Right horizontal position / bottom vertical position

If only one value is specified, the other will default to “center.”

x y – The horizontal and vertical position expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The position is measured from the top left corner, which is represented by the value 0 0.

It is possible to mix position values and percentage values.

x% y% – The horizontal and vertical position expressed as a percentage of the horizontal or vertical size of the containing element. The position is measured from the top left corner, which is represented by the value 0% 0%. The bottom right corner is represented by the value 100% 100%.

If only one value is specified, the other will default to 50%.

  • inherit – Inherits the background-position value from the parent element
  • initial – Sets the background-position value to its default

background-attachment

The background-attachment property specifies whether a background image should have a fixed position, or if it should scroll within a containing element.

Possible values for background-attachment include:

  • fixed – The background image is fixed and will not scroll with the element
  • scroll – The background image scrolls with the element. This is the default value.
  • local – The background image scrolls with the contents of the element
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

background-repeat

The background-repeat property specifies whether a background image will be repeated.

Possible values for background-repeat include:

  • repeat – The background image will be repeated horizontally and vertically. This is the default value.
  • repeat-x – The background image will be repeated horizontally
  • repeat-y – The background image will be repeated vertically
  • no-repeat – The background image will not be repeated
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default