Vetia background-size

Vetia background-size përcakton madhësinë e figurës së sfondit. Vlera e vetisë janë çdo njësi për madhësi, ose fjalë kyçe auto, cover ose contain.

Sintaksa

përzgjedhësi {
	background-size: vlera;
}

Fjalët kyçe

Vlera	Përshkrimi
`auto`	Sfondi do të ketë madhësinë natyrore, të tillë si madhësia aktuale e figurës së sfondit. Nëse `auto` është caktuar vetëm për njërën anë, atëherë përgjatë asaj ane sfondi do të shkallëzohet në mënyrë të tillë, që të ketë përmasa jo të shtrembëruara.
`cover`	Shkallëzon figurën në mënyrë që ajo të mbulojë të gjithë bllokun duke ruajtur përmasat. Figura do të përpiqet të vendoset plotësisht, por kjo nuk do të ndodhë gjithmonë, prandaj një pjesë e saj do të pritet. Blloku gjithmonë do të mbushet me figurën plotësisht.
`contain`	Shkallëzon figurën në mënyrë që ajo të futet plotësisht në bllok duke ruajtur përmasat. Në këtë rast ajo mund të zërë ose gjithë gjerësinë, ose gjithë lartësinë (varet nga përmasat e figurës dhe nga madhësitë e elementit). Në përgjithësi blloku nuk do të mbushet plotësisht me figurën (por figura gjithmonë do të jetë e dukshme e tërë, edhe pse në version të zvogëluar).

Vlera e paracaktuar: auto.

Përdorimi

Njesitë për madhësi dhe auto mund të përdoren në kombinime të ndryshme, për shembull, kështu: auto 20px, ose 30% 20px, ose auto 30% e kështu me radhë. Në këtë rast parametri i parë përcakton madhësinë e sfondit përgjatë gjerësisë, ndërsa parametri i dytë - madhësinë e sfondit përgjatë lartësisë. Nëse specifikohet një parametër - ai do të përcaktojë madhësinë e sfondit si përgjatë gjerësisë, ashtu edhe përgjatë lartësisë njëkohësisht.

Shembull

Tani figura e sfondit do të ketë madhësinë e saj natyrore:

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

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

Shembull

Tani figura e sfondit do të jetë me madhësi 300px me 400px (në rastin tonë përmasat e figurës do të shtrembërohen):

<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;
}

Shembull

Tani figura e sfondit do të jetë me madhësi 400px me 400px (në rastin tonë përmasat e figurës do të shtrembërohen):

<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;
}

Shembull

Tani figura e sfondit do të jetë me madhësi 400px përgjatë horizontit, ndërsa përgjatë vertikalit madhësia e saj do të përshtatet në mënyrë që përmasat të mos shtrembërohen:

<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;
}

Shembull

Tani figura e sfondit do të jetë me madhësi 400px përgjatë vertikalit, ndërsa përgjatë horizontit madhësia e saj do të përshtatet në mënyrë që përmasat të mos shtrembërohen:

<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;
}

Shembull . Vlera contain

Shikoni funksionimin e vlerës 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;
}

Shembull . Vlera cover

Shikoni funksionimin e vlerës 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;
}

Shembull . Përmirësimi i funksionimit të cover

Funksionimin e vlerës cover mund ta përmirësojmë, nëse e centrojmë figurën me ndihmën e vetisë background-position (në rastin tonë në pjesët e dukshme do të fillojnë të bien kokët e kuajve, dhe jo prapanicat e tyre):

<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;
}

Shihni gjithashtu

vetia background,
e cila paraqet vetinë e shkurtuar për sfond