Ominaisuus background-position

Ominaisuus background-position määrittää elementin taustakuvan sijainnin. Sijaintia voidaan määrittää käyttämällä mitä tahansa koko-yksiköitä. Ensimmäinen arvo tarkoittaa vasemman reunan etäisyyttä, toinen - yläreunan etäisyyttä.

Sijaintia voidaan myös määrittää avainsanoilla. Tässä tapauksessa arvojen järjestyksellä ei ole väliä. Pystysuuntaiset avainsanat: top, center, bottom. Vaakasuuntaiset avainsanat: left, center, right.

Kuinka käyttää avainsanoja

Sijoittaaksesi kuvan avainsanalla, sinun tulee määrittää yksi arvo pystysuunnalle ja yksi vaakasuunnalle. Esimerkiksi, jos määrität arvon top right, kuva sijoittuu oikeaan yläkulmaan.

Sanojen järjestyksellä ei ole väliä: voit kirjoittaa top right, tai voit - right top. Jos on avainsana center - sen voi jättää pois. Esimerkiksi, top center on sama kuin vain top. Ja center center on sama kuin vain center.

Syntaksi

cssvalitsija {
  background-position: kaksi arvoa välilyönnillä erotettuna;
}

Esimerkki

Oletusarvoisesti taustakuva on vasemmassa yläkulmassa:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva oikeaan yläkulmaan:

html<div id="elem"></div>

css#elem {
  background-position: top right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva oikeaan alakulmaan:

html<div id="elem"></div>

css#elem {
  background-position: bottom right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva oikealle ja pystysuunnassa keskelle:

html<div id="elem"></div>

css#elem {
  background-position: right center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva lohkon keskelle:

html<div id="elem"></div>

css#elem {
  background-position: center center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva etäisyydelle 20px vasemmalta ja 40px yläpuolelta:

html<div id="elem"></div>

css#elem {
  background-position: 20px 40px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva etäisyydelle 90% vasemmalta ja 100% yläpuolelta:

html<div id="elem"></div>

css#elem {
  background-position: 90% 100%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva etäisyydelle 30px vasemmalta ja alareunaan pystysuunnassa:

html<div id="elem"></div>

css#elem {
  background-position: 30px bottom;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva etäisyydelle 30px vasemmalta ja keskelle pystysuunnassa:

html<div id="elem"></div>

css#elem {
  background-position: 30px center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Sijoitetaan taustakuva etäisyydelle 30px yläpuolelta ja keskelle vaakasuunnassa:

html<div id="elem"></div>

css#elem {
  background-position: center 30px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Katso myös