Запіс на курсы па HTML, CSS, JavaScript, PHP, Python, фрэймворкам і CMS,
а таксама: дапамога ў пошуку працы і заказаў, стажыроўка на рэальных праектах→
80 of 313 menu

Уласцівасць 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,
    якая з'яўляецца ўласцівасцю-скарачэннем для фону
byenru