MelangeCSS Reference

Current Version: 1.0.0-RC5

Background

Background positions and repeats are provided. Background colors are part of the Colors group. Other background properties are highly use-case specific or esoteric, so are not provided by default

Properties

Background Position

Background position can also be finely tuned with percentages, but these values should suffice for common needs.

bgp-t
Background Position Top
 
.bgp-t {
  background-position: top;
}
bgp-b
Background Position Bottom
 
.bgp-b {
  background-position: bottom;
}
bgp-l
Background Position Left
 
.bgp-l {
  background-position: left;
}
bgp-r
Background Position Right
 
.bgp-r {
  background-position: right;
}
bgp-c
Background Position Center
 
.bgp-c {
  background-position: center;
}
bgp-tr
Background Position Top Right
 
.bgp-tr {
  background-position: top right;
}
bgp-tl
Background Position Top Left
 
.bgp-tl {
  background-position: top left;
}
bgp-br
Background Position Bottom Right
 
.bgp-br {
  background-position: bottom right;
}
bgp-bl
Background Position Bottom Left
 
.bgp-bl {
  background-position: bottom left;
}
bgp-cr
Background Position Top Right
 
.bgp-cr {
  background-position: center right;
}
bgp-cl
Background Position Top Left
 
.bgp-cl {
  background-position: center left;
}
bgp-ct
Background Position Bottom Right
 
.bgp-ct {
  background-position: center top;
}
bgp-cb
Background Position Bottom Left
 
.bgp-cb {
  background-position: center bottom;
}
Background Repeat
bgr
Background Repeat X and Y
 
.bgr {
  background-repeat: repeat;
}
bgr-x
Background Repeat X
 
.bgr-x {
  background-repeat: repeat-x;
}
bgr-y
Background Repeat Y
 
.bgr-y {
  background-repeat: repeat-y;
}
bgr-s
Background Repeat Space
 
.bgr-s {
  background-repeat: space;
}
bgr-r
Background Repeat Round
 
.bgr-r {
  background-repeat: round;
}
bg-none
Background Repeat None
 
.bg-none {
  background-repeat: no-repeat;
}