background-position
En esta página
| Clase | Propiedades CSS |
|---|---|
bg-top-left |
background-position: top left; |
bg-top |
background-position: top; |
bg-top-right |
background-position: top right; |
bg-left |
background-position: left; |
bg-center |
background-position: center; |
bg-right |
background-position: right; |
bg-bottom-left |
background-position: bottom left; |
bg-bottom |
background-position: bottom; |
bg-bottom-right |
background-position: bottom right; |
bg-position-(<custom-property>) |
background-position: var(<custom-property>); |
bg-position-[<value>] |
background-position: <value>; |
Examples#
Basic example#
Use utilities like bg-center, bg-right, and bg-top-left to control the position of an element's background image:
{
bg-top-left
bg-top
bg-top-right
bg-left
bg-center
bg-right
bg-bottom-left
bg-bottom
bg-bottom-right
<!-- [!code classes:bg-top-left,bg-top-right,bg-bottom-right,bg-bottom-left,bg-center,bg-right,bg-top,bg-bottom,bg-left] -->
<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-center"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>