Background - ArchCSS

Background Color

Use .bg-{color} to set the background color of an element - every one of the framework's 28 theme colors is supported. See the full palette on the Colors page.

.bg-primary

.bg-secondary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-light

.bg-dark

.bg-red

.bg-green

.bg-blue

.bg-black

.bg-white

.bg-pink

.bg-purple

.bg-indigo

.bg-cyan

.bg-teal

.bg-lime

.bg-yellow

.bg-amber

.bg-orange

.bg-lightblue

.bg-lightgreen

.bg-deeppurple

.bg-deeporange

.bg-brown

.bg-grey

<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-info">Info</div>
<div class="bg-warning">Warning</div>
<div class="bg-danger">Danger</div>
<div class="bg-light">Light</div>
<div class="bg-dark">Dark</div>
<div class="bg-red">Red</div>
<div class="bg-green">Green</div>
<div class="bg-blue">Blue</div>
<div class="bg-black">Black</div>
<div class="bg-white">White</div>
<div class="bg-pink">Pink</div>
<div class="bg-purple">Purple</div>
<div class="bg-indigo">Indigo</div>
<div class="bg-cyan">Cyan</div>
<div class="bg-teal">Teal</div>
<div class="bg-lime">Lime</div>
<div class="bg-yellow">Yellow</div>
<div class="bg-amber">Amber</div>
<div class="bg-orange">Orange</div>
<div class="bg-lightblue">Lightblue</div>
<div class="bg-lightgreen">Lightgreen</div>
<div class="bg-deeppurple">Deeppurple</div>
<div class="bg-deeporange">Deeporange</div>
<div class="bg-brown">Brown</div>
<div class="bg-grey">Grey</div>

Class	Color	Hex
`.bg-primary`	Primary	#03A9F4
`.bg-secondary`	Secondary	#333333
`.bg-success`	Success	#28a745
`.bg-info`	Info	#0DCAF0
`.bg-warning`	Warning	#FFC107
`.bg-danger`	Danger	#DC3545
`.bg-light`	Light	#f5f5f5
`.bg-dark`	Dark	#212529
`.bg-red`	Red	#F44336
`.bg-green`	Green	#4CAF50
`.bg-blue`	Blue	#2196F3
`.bg-black`	Black	#000000
`.bg-white`	White	#ffffff
`.bg-pink`	Pink	#E91E63
`.bg-purple`	Purple	#9C27B0
`.bg-indigo`	Indigo	#3E51B5
`.bg-cyan`	Cyan	#00BCD4
`.bg-teal`	Teal	#009688
`.bg-lime`	Lime	#CDDC39
`.bg-yellow`	Yellow	#FFEB3B
`.bg-amber`	Amber	#FFC107
`.bg-orange`	Orange	#FF9800
`.bg-lightblue`	Lightblue	#03A9F4
`.bg-lightgreen`	Lightgreen	#76FF03
`.bg-deeppurple`	Deeppurple	#673AB7
`.bg-deeporange`	Deeporange	#DD6E0F
`.bg-brown`	Brown	#964B00
`.bg-grey`	Grey	#808080

Hover Background

Prefix any background color with hover: to apply it only on hover.

<button class="bg-primary hover:bg-blue">Hover me</button>

<div class="bg-light hover:bg-primary">
  Hover to change background
</div>

Background Size & Repeat

Control how a background image is sized and repeated within its container.

Class	CSS Property
`.bg-cover`	`background-size: cover`
`.bg-contain`	`background-size: contain`
`.bg-repeat`	`background-repeat: repeat`
`.bg-no-repeat`	`background-repeat: no-repeat`
`.bg-repeat-x`	`background-repeat: repeat-x`
`.bg-repeat-y`	`background-repeat: repeat-y`
`.bg-scroll`	`background-attachment: scroll`
`.bg-fixed`	`background-attachment: fixed`
`.bg-local`	`background-attachment: local`

<!-- Cover: image fills the container -->
<div class="bg-cover bg-no-repeat" style="background-image: url('photo.jpg');"></div>

<!-- Contain: image fits inside the container -->
<div class="bg-contain bg-no-repeat" style="background-image: url('photo.jpg');"></div>

<!-- Fixed attachment (parallax effect) -->
<div class="bg-fixed bg-cover" style="background-image: url('photo.jpg');"></div>