Backgrounds

go.raybo.org/2cDw

Backgrounds are an important group of classes that let you control images, gradients and color background properties.

Background Color

  • bg-COL-STR
transparent current black white
gray red yellow green blue indigo purple pink
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900

Docs

Background colors are specified using the bg shortcut, plus a color name, plus a strength. 500 is about the medium strength for each of the colors although I think that 300 might be a better name for yellow and 600 yello looks more orange to me.

There is also of course transparent black and white and current, which is just whatever the current color happens to be. I think the colors I'm listing here are pretty self explanatory, so I'm not giving you a complex sample here, but don't worry you'll have plenty of opportunities to try these in other samples.

Background Opacity

  • bg-opacity-AMT
    • AMT (opacity/100)

      0 5 10 20 25 30 40 50
      60 70 75 80 90 95 100

Docs Try it

Background opacity is pretty straightforward with the usual values you might have seen before from 0 to 100%. The cool thing is that you can change the background opacity in the same place as the color and other parameters.

Interesting to note that this doesn't affect the opacity of any background image, just the opacity of the background color.

Background Image

  • bg(-none)|(-gradient-to)(-DIR)
    • DIR

      t tr r br b bl l tl

Docs Try it

Although there's a set of classes referred to in the docs as the background image classes, you can't really use images. It's meant to let you use the background-image css property to insert a set of gradients.

To use it you specify either bg-none for no background or bg-gradient-to and then a direction. The direction are the typical top right bottom left with the additional corners in one of two letter directions.

These classes don't make sense without a gradient stop. It's a separate set of classes we'll explore next, but I've included one in the sample so you can see it in action.

Gradient Color Stops

  • (from|via|to)-COL-AMT
transparent current black white
gray red yellow green blue indigo purple pink
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900

Docs Try it

To create gradient color steps, you simply use one of three keywords from, via and to to specify a breakpoint for your gradients.

You are still going to need to specify a direction with a background image class.

If you only specify a from color stop it will go to white. If you also specify to then the gradient will start from one color and go to the ending color. Remember that the direction might be set right to left, so the gradient can look like it's going backwards.

With the via keyword you add a middle point for the gradient. You cannot add more than one mid point.

Background Size

  • bg(-TYP)
    • TYP

      auto cover contain

Docs Try it

Let's move on to background images. This sounds weird, but there isn't a way to specify the URL of an image you want to use for the background, so you can do that using the style attribute (take a look at the example).

But you can specify most css properties like the background size. You can use auto, which just shows the image in it's natural size; or cover, which tries to fit the image so that it completely fills the background, resizing as necessary...this is a pretty common type; Finally, there's contain, which makes the whole image fit in the box.

This is one of those sets of classes that you're probably want to use with other classes so take a look at the example.

Background Repeat

  • bg(-TYP)
    • TYP

      repeat no-repeat repeat-x repeat-y repeat-round repeat-space

Docs Try it

Let's move on to background images. This sounds weird, but there isn't a way to specify the URL of an image you want to use for the background, so you can do that using the style attribute (take a look at the example).

But you can specify most css properties like the background size. You can use auto, which just shows the image in it's natural size; or cover, which tries to fit the image so that it completely fills the background, resizing as necessary...this is a pretty common type; Finally, there's contain, which makes the whole image fit in the box.

This is one of those sets of classes that you're probably want to use with other classes so take a look at the example.

Background Position

  • bg(-TYP)
    • TYP

      bottom center left left-bottom left-top right right-bottom right-top top

Docs Try it

Positions are available for when you are not repeating an element and follow a traditional TRBL or top right bottom left order with corners added as well, so you end up with left-bottom, left-top, etc.

Background Origin

  • bg-origin(-TYP)
    • TYP

      padding border content

Docs Try it

The background origin controls where an element's background is positioned in relationship to borders. This correlates to the background-origin property and has three possible values.

Padding means that the background will draw from the upper left corner of the padding edge. This is the default value

Border means that the background will draw from the upper left corner of the border.

Finally content will try to fit the background image from the upper left corner of the content.

If you take a look at the example, you can see that this looks great specially when the sizes of the internal elements are consistent.

Box Decoration Break

decoration-slice decoration-clone

Docs Try it

Inline elements will sometimes take up more than one line inside a container. This property controls wether the element will appy things like margin, padding box-shadow and others to each of the lines or to the entire element. decoration-slice will initiate this behavior, and decoration-clone will reset things.