1.1 Background - Colors Colors
.bg-mulberry
.bg-purple
.bg-magenta
.bg-pink
.bg-charcoal
.bg-slate
.bg-dove
.bg-stone
.bg-moon
.bg-bone
.bg-red
.bg-orange
.bg-yellow
.bg-green
.bg-blue
.bg-white
.bg-transparent
.bg-backdrop - darkened $charcoal used for modal and menu backdrops
1.2 Background - Deprecated Colors Deprecated Colors
No longer use these colors, they are being deprecated. The names are the only thing being deprecated, the variables and the colors themselves have been updated to match the new RF2 colors.
.bg-frost
.bg-fog
.bg-moonstone
.bg-snow
1.3 Background - Gradients Gradients
If you want two colors for the price of one, use a gradiant.
.bg-mulberry-to-purple-y
.bg-mulberry-to-pink-y
.bg-purple-to-pink-y
.bg-magenta-to-mulberry-y
.bg-white-to-bone-y
.bg-gradient-none
.bg-mulberry-to-purple-bottom-right
.bg-mulberry-to-pink-bottom-right
.bg-purple-to-pink-bottom-right
.bg-white-to-bone-bottom-right
Examples
Default styling
bg-center
center
bg-left
left
bg-right
right
bg-top
top
bg-bottom
bottom
<div class="[modifier class] short bg-repeat-none"
style="background-image: url('http://www.fillmurray.com/50/50');">
</div>
Examples
Default styling
bg-repeat
repeat x and y
bg-repeat-x
repeat x
bg-repeat-y
repeat y
bg-repeat-none
no repeat
<div class="[modifier class] short"
style="background-image: url('http://www.fillmurray.com/50/50');">
</div>
Examples
Default styling
bg-cover
cover background within block
bg-contain
contain background within block
<div class="[modifier class] short"
style="background-image: url('http://www.fillmurray.com/300/600');">
</div>