Nearly Pure Mustard

    @citizensadvice/background-position

    1.0.3 • Public • Published

    Background-position npm (scoped)

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

    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"
    />

    Keywords

    none

    Install

    npm i @citizensadvice/background-position

    DownloadsWeekly Downloads

    10

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    9.73 kB

    Total Files

    6

    Last publish

    Collaborators

    • marianayovcheva
    • mrdaniellewis
    • davidsauntson
    • davidrapson