Background Position

Configures the starting position of a background image.

Classes
Class Properties
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-top background-position: right top;
bg-right-bottom background-position: right bottom;
bg-top background-position: top;
Examples

<div class="card overflow-hidden p-5 grid grid-nogutter">
    <div class="bg-bottom bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-center bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-left bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-left-bottom bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-left-top bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-right bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-right-top bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-right-bottom bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
    <div class="bg-top bg-auto bg-no-repeat shadow-1 m-3 col-2" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
</div>

Responsive

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:bg-top to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens e.g monitors

<div class="card overflow-hidden p-5 flex align-items-center justify-content-center">
    <div class="bg-top md:bg-bottom bg-auto bg-no-repeat shadow-1" style="background-image: url('./assets/images/walter.jpg'); min-width: 150px; min-height: 150px"></div>
</div>