The background-position property sets the starting position of a background image. This can only be used with a background image.
npm install @citizensadvice/background-positionThe background-position property sets the starting position of a background image. This can only be used with a background image.
- Classes
- Examples
- Installation
``CSS`
.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 }
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 |
`html`.........
`shell`
$ npm install @citizensadvice/backround-position
now import into your stylesheet...
`scss`
@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
`html``
/>