Background-size қасиеті

background-size қасиеті фон бейнесінің өлшемін белгілейді. Қасиеттің мәні ретінде кез келген өлшем бірліктері, немесе auto, cover немесе contain кілт сөздері қолданылады.

Синтаксис

селектор {
	background-size: мән;
}

Кілт сөздер

Мән	Сипаттама
`auto`	Фондың нақты өлшемі болады, яғни фон бейнесінің шынайы өлшемі сияқты. Егер `auto` тек бір жағы үшін берілсе, онда бұл жағы бойынша фон бейбестің пропорциялары бұзылмайтын етіп масштабталады.
`cover`	Бейнені блоктың барлық аумағын жауып табатын, пропорцияларын сақтай отырып масштабтайды. Бейне толығымен сыйғызуға тырысады, бірақ бұл әрқашан сәтті болмайды, сондықтан оның бір бөлігі қиылып тасталады. Блок әрқашан бейнемен толығымен жабылады.
`contain`	Бейнені блокқа толығымен сыйғызатын, пропорцияларын сақтай отырып масштабтайды. Бұл ретте ол не енінің барлығын, не биіктігінің барлығын алуы мүмкін (бұл бейне мен элементтің пропорцияларына байланысты). Блок жалпы алғанда бейнемен толығымен жабылмайды (бірақ бейне әрқашан толығымен көрінеді, тіпті кішірейтілген нұсқада да).

Әдепкі мән: auto.

Қолдану

Өлшем бірліктері мен auto әртүрлі комбинацияларда қолданылуы мүмкін, мысалы: auto 20px, 30% 20px, немесе auto 30% және т.б. Бұл жағдайда бірінші параметр фонның енін белгілейді, ал екінші параметр - фонның биіктігін. Егер бір параметр көрсетілсе - ол фонның өлшемін деңгейі де, биіктігі де бір уақытта белгілейді.

Мысал

Қазір фон бейнесінің нақты өлшемі болады:

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

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

Мысал

Қазір фон бейнесінің өлшемі 300px 400px болады (біздің жағдайда бейне пропорциялары бұзылады):

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

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

Мысал

Қазір фон бейнесінің өлшемі 400px 400px болады (біздің жағдайда бейне пропорциялары бұзылады):

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

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

Мысал

Қазір фон бейнесі көлденеңінен 400px болады, ал тігінен оның өлшемі пропорциялар бұзылмауы үшін реттелетін болады:

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

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

Мысал

Қазір фон бейнесі тігінен 400px болады, ал көлденеңінен оның өлшемі пропорциялар бұзылмауы үшін реттелетін болады:

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

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

Мысал . Contain мәні

contain мәнінің жұмысын қараңыз:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Мысал . Cover мәні

cover мәнінің жұмысын қараңыз:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Мысал . Cover жұмысын жақсарту

cover мәнінің жұмысын background-position қасиеті арқылы бейнені ортаға жылжыту арқылы жақсартуға болады (біздің жағдайда көрінетін бөліктерде аттардың артқы бөліктері емес, бастары пайда болады):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Сондай-ақ қараңыз

background қасиеті,
фон үшін қысқартылған қасиет ретінде