Egenskapen background-position

Egenskapen background-position angir plasseringen til bakgrunnsbildet til et element. Plasseringen kan angis ved hjelp av alle enheter for størrelser. Den første verdien angir innrykk fra venstre, den andre - innrykk fra toppen.

Du kan også angi posisjon med nøkkelord. I dette tilfellet er rekkefølgen på verdiene ikke viktig. Nøkkelord for vertikal: top, center, bottom. Nøkkelord for horisontal: left, center, right.

Hvordan bruke nøkkelord

For å plassere bildet med et nøkkelord, må du angi én verdi for vertikal og én for horisontal. For eksempel, hvis du angir verdien top right, vil bildet havne øverst til høyre.

Rekkefølgen på ordene er uviktig: du kan skrive top right, eller du kan skrive right top. Hvis det er nøkkelordet center - kan det utelates. For eksempel, top center, er det samme som bare top. Og center center er det samme som bare center.

Syntaks

velger {
	background-position: to verdier atskilt med mellomrom;
}

Eksempel

Som standard vil bakgrunnsbildet være i øvre venstre hjørne:

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

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

Eksempel

La oss plassere bakgrunnsbildet i øvre høyre hjørne:

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

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

Eksempel

La oss plassere bakgrunnsbildet i nedre høyre hjørne:

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

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

Eksempel

La oss plassere bakgrunnsbildet til høyre og sentrert vertikalt:

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

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

Eksempel

La oss plassere bakgrunnsbildet i sentrum av blokken:

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

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

Eksempel

La oss plassere bakgrunnsbildet i en avstand på 20px fra venstre og 40px fra toppen:

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

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

Eksempel

La oss plassere bakgrunnsbildet i en avstand på 90% fra venstre og 100% fra toppen:

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

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

Eksempel

La oss plassere bakgrunnsbildet i en avstand på 30px fra venstre og nederst vertikalt:

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

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

Eksempel

La oss plassere bakgrunnsbildet i en avstand på 30px fra venstre og sentrert vertikalt:

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

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

Eksempel

La oss plassere bakgrunnsbildet i en avstand på 30px fra toppen og sentrert horisontalt:

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

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

Se også

egenskapen background,
som er en sammentreningsegenskap for bakgrunn