---
# System prepended metadata

title: Background colors

---


> [name=Laureen Delhaye] **Validated!**



# Background colors
Background colors 

## Usage


## Style


## Code
All branded-colors used by Proximus used some CSS classes. 
Thoses always begin with `rs-bg-`

### Create a Flat Background: 
1. Select the color of your choice like `rs-bg-purple`
2. Add class to your HTML element.

> Ex: `rs-bg-purple` `rs-bg-yellow` `rs-bg-magenta` `rs-bg-blue`


### Create a Nuanced Background: 
1. Select the color of your choice like `rs-bg-purple`
2. Followed by nuance property can take a value from 1 - 9.

> Ex: `rs-bg-purple1` `rs-bg-purple8` `rs-bg-magenta4` `rs-bg-grey3`
>NOTE: The lower value is the lightest.

#### All Background occurences:

![](https://i.imgur.com/gCHuH19.png)

### Create a Transparent Background: 
1. Use `rs-bg-tr1`, `rs-bg-tr2`, `rs-bg-pt1` or `rs-bg-pt5`

![](https://i.imgur.com/eVtelFU.png)


### Create a Hover Background: 
1. Use `rs-bg-hover`
2. Followed by the color of your choice like `-purple`
> Ex: rs-bg-hover-purple


#### All "Hover Background" occurences:
![](https://i.imgur.com/myEDKoP.png)

### Create a Gradient Background:

To ceate a background, use this image to decide from which side your gradient will come.
![](https://i.imgur.com/ubmGysc.png)

There's two differents of gradient backgrounds:

#### For the Full Gradient
1. Use `rs-bgt-#`
2. Followed by number of the side you want to the color come.
> Ex: rs-bgt-4 (for a big gradient Bottom-Right)

![](https://i.imgur.com/eLPwQ3B.png)


#### For the Light Gradient
1. Use `rs-bgtl-#`
2. Followed by number of the side you want to the color come.
> Ex: rs-bgtl-8 (for a light gradient Top-Left)

![](https://i.imgur.com/aRQa4uN.png)


### Create a Selected Background: 
1. Use `rs-bg-selected`

![](https://i.imgur.com/3Es6bzm.png)


### To remove a Background:

`rs-no-bg`   > no bacground
`rs-no-bg-s` > no background on small
`rs-no-bg-m` > no background on medium
`rs-no-bg-l` > no background on large

