Background-position

The background-position property sets the starting position of a background image. This can only be used with a background image.

• Classes
• Examples
• Installation

Classes

.bg-center    { background-repeat: no-repeat; background-position: center center    }
.bg-top       { background-repeat: no-repeat; background-position: top center       }
.bg-right     { background-repeat: no-repeat; background-position: center right     }
.bg-bottom    { background-repeat: no-repeat; background-position: bottom center    }
.bg-left      { background-repeat: no-repeat; background-position: center left      }

Responsive background-position classes

To apply specific classes at set screen widths, use the following classes:

| Class name | Description | | --------------------- | ------------------------------------------- | | [aboveClassName]-ns | Screens with a min-width of 48rem | | [aboveClassName]-m | Screens with widths from 48rem to 64rem | | [aboveClassName]-l | Screens with a min-width of 64rem |

Examples

<div class="bg-center bg-left-ns">...</div>
<div class="bg-left bg-right-ns">...</div>
<div class="bg-right bg-left-ns">...</div>

Installation

$ npm install @citizensadvice/backround-position

now import into your stylesheet...

@import '@citizensadvice/background-position/index.scss';

You can also make use of the unpkg service, try adding the link below to the head of your HTML file

<link
  src="https://unpkg.com/@citizensadvice/background-position@latest/build/background-position.css"
/>