CSS властивість background. Фон для сайту
- Налаштування Sublime Text 3
- Шаблон заявки на замовлення
- CSS властивість background
- CSS властивість position
- Шпаргалка з FLEX
- Одиниці вимірювання CSS
- Застосування класу "ibg"
- CSS властивість transition
- Animation та @keyframes
- Шпаргалка Slick Slider
- Шпаргалка CSS Transform
- Шпаргалка CSS Grid
- Gulp сценарій
- Зарезервовані слова JS
Background. Керує фоном елемента.
Ця універсальна CSS властивість дозволяє одночасно задати кілька параметрів фону, а саме визначити колір, встановити фонове зображення, задати початкове положення фонового зображення, визначити як повторюватиметься фонове зображення, чи буде прокручуватися фонове зображення разом із вмістом та масштабувати фонове зображення відповідно до заданих розмірів.
Також значенням властивості background може бути вказана градієнтна заливка фону.
Background-color
Визначає колір фона елемента
CSS код:
.block{
background: transparent;
}
Альтернативний CSS код:
.block{
background-color: transparent;
}
CSS код:
.block{
background: #18b5a4;
}
Альтернативний CSS код:
.block{
background-color: #18b5a4;
}
Кодувальник з HEX до RGB
CSS код:
.block{
background: rgb(24,181,164);
}
Альтернативний CSS код:
.block{
background-color: rgb(24,181,164);
}
Кодувальник з HEX до RGBA
CSS код:
.block{
background: rgba(24,181,164,0.5);
}
Альтернативний CSS код:
.block{
background-color: rgba(24,181,164,0.5);
}
Background-image
Встановлює фонове зображення елемента або задає градієнтну заливку
CSS код:
.block{
background: url('img/background/avatar.webp');
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
}
Інструмент створення градієнта
CSS код:
.block{
/* Old browsers */
background: rgb(236,232,157);
/* FF3.6-15 */
background: -moz-linear-gradient(top, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: -webkit-linear-gradient(top, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: linear-gradient(to bottom, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
}
Альтернативний CSS код:
.block{
/* Old browsers */
background-color: rgb(236,232,157);
/* FF3.6-15 */
background-image: -moz-linear-gradient(top, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%);
/* Chrome10-25,Safari5.1-6 */
background-image: -webkit-linear-gradient(top, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: linear-gradient(to bottom, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
}
Інструмент створення градієнта
CSS код:
.block{
/* Old browsers */
background: rgb(236,232,157);
/* FF3.6-15 */
background: -moz-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: radial-gradient(ellipse at center, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
}
Альтернативний CSS код:
.block{
/* Old browsers */
background-color: rgb(236,232,157);
/* FF3.6-15 */
background-image: -moz-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%);
/* Chrome10-25,Safari5.1-6 */
background-image: -webkit-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-image: radial-gradient(ellipse at center, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
}
Background-repeat
Визначає, як повторюватиметься фонове зображення
Фонове зображення повторюється по горизонталі та вертикалі.
CSS код:
.block{
background: url('img/background/avatar.webp') repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: repeat;
}
Встановлює одне фонове зображення елемента без його повторень
CSS код:
.block{
background: url('img/background/avatar.webp') no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: no-repeat;
}
Фоновий малюнок повторюється лише по горизонталі.
CSS код:
.block{
background: url('img/background/avatar.webp') repeat-x;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: repeat-x;
}
Фоновий малюнок повторюється лише з вертикалі.
CSS код:
.block{
background: url('img/background/avatar.webp') repeat-y;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: repeat-y;
}
Зображення повторюється стільки разів, щоб повністю заповнити область. Якщо це не вдається, між зображеннями додається порожній простір.
CSS код:
.block{
background: url('img/background/avatar.webp') space;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: space;
}
Зображення повторюється так, щоб в області розмістилося ціле число малюнків. Якщо це не вдається зробити, фонові малюнки масштабуються.
CSS код:
.block{
background: url('img/background/avatar.webp') round;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: round;
}
Background-position
Задає початкове положення фонового зображення, де перше значення (відсотки, px, слово) визначає розташування по горизонталі, друге – вертикалі.
CSS код:
.block{
background: url('img/background/avatar.webp') 0 0 no-repeat;
}
Альтернативний CSS код:
.block{
background: url('img/background/avatar.webp') top left no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: no-repeat;
background-position: 0 0;
}
CSS код:
.block{
background: url('img/background/avatar.webp') 50% no-repeat;
}
Альтернативний CSS код:
.block{
background: url('img/background/avatar.webp') center no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: no-repeat;
background-position: 50% 50%;
}
CSS код:
.block{
background: url('img/background/avatar.webp') 0 50% no-repeat;
}
Альтернативний CSS код:
.block{
background: url('img/background/avatar.webp') left no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: no-repeat;
background-position: 0 50%;
}
CSS код:
.block{
background: url('img/background/avatar.webp') 100% 100% no-repeat;
}
Альтернативний CSS код:
.block{
background: url('img/background/avatar.webp') bottom right no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: no-repeat;
background-position: 100% 100%;
}
CSS код:
.block{
background: url('img/background/avatar.webp') 25px 30px no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp');
background-repeat: no-repeat;
background-position: 25px 30px;
}
Background-attachment
Встановлює, чи прокручуватиметься фонове зображення разом із вмістом елемента.
Дозволяє переміщатися фону разом із вікном браузера
CSS код:
.block{
background: url('img/background/bg.webp') 0 0 no-repeat scroll;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: scroll;
}
Робить фонове зображення елемента нерухомим, а також встановлює фонове зображення щодо вікна браузера.
CSS код:
.block{
background: url('img/background/bg.webp') 0 0 no-repeat fixed;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae, earum perferendis provident quaerat, veritatis, debitis repudiandae iste porro commodi dolorum. Soluta, cum incidunt, doloremque commodi odit maxime aut autem!
Tempore quaerat accusantium placeat autem! Aliquid optio dignissimos facere, consequuntur perferendis dolorem provident rem vel, dolorum repellendus veniam quia odit, nobis voluptatem excepturi est, necessitatibus et at. Expedita voluptate, excepturi.
Nemo libero, laboriosam perferendis saepe quis in quibusdam sed itaque tempora dolor temporibus ipsa officiis voluptatum quisquam, nostrum modi harum vitae officia. Facilis rerum ducimus dolores necessitatibus cum voluptate velit.
Cupiditate omnis similique magnam libero eligendi, nobis at minima quas dignissimos ipsum, vitae, explicabo, quibusdam hic. Quasi, ut, dolore! Odio reprehenderit nostrum consectetur nulla eius porro facilis, corporis ipsum! Fugit.
Omnis assumenda sapiente praesentium doloribus earum laboriosam, temporibus nihil reiciendis numquam aut accusamus hic possimus voluptatem incidunt voluptates molestiae, dicta impedit. Dolorum explicabo quos, provident, facilis dicta incidunt nobis delectus.
Omnis repudiandae in nulla, debitis at quo ut distinctio, porro adipisci voluptatibus fugiat ea tempore assumenda accusantium similique tempora eligendi ab aspernatur aut voluptas corrupti vero id harum. Quidem, voluptatibus.
Similique fugiat aut facilis veniam nesciunt iure eveniet, sequi debitis ducimus rem velit cum id voluptatum asperiores maxime veritatis reprehenderit expedita, labore obcaecati. Obcaecati eaque temporibus aperiam aut natus rerum.
Similique exercitationem error esse architecto ut expedita aliquam optio magni repellat, dolore facilis sit deleniti quae qui commodi autem, cumque blanditiis dignissimos nostrum non et amet delectus! Magni, quam, iusto.
Nisi neque fuga reprehenderit est? Culpa eos sunt tempore, optio cumque minima sit iste iure pariatur deserunt enim officia eum necessitatibus perspiciatis modi molestias consequatur accusamus, repellat aut consequuntur sed!
Saepe illo vel mollitia sunt, quod expedita maxime reprehenderit a ipsam vero aut labore nulla, necessitatibus, eaque inventore quaerat. Reprehenderit, natus. Excepturi asperiores, esse saepe numquam magni tempore hic, voluptatum.
Optio reprehenderit, fugit. Dignissimos saepe, eveniet quis quidem aliquam molestias labore voluptatum eligendi nesciunt iusto rem, inventore aperiam quisquam velit corporis sapiente sunt, aspernatur laboriosam, adipisci consectetur optio impedit corrupti.
Neque ipsum voluptatibus, vitae qui ullam, facere consequuntur cum quis eius, voluptate, fuga quas! Facilis voluptatem accusamus autem ratione, ab officiis dolor ad ullam veritatis vitae, perspiciatis iusto pariatur minus!
Nihil iste, ab repellat hic amet aliquam in sit repudiandae quia tempora, eum quaerat quas, quam beatae aspernatur. Ex officiis laboriosam numquam magni provident, obcaecati praesentium delectus reprehenderit libero autem.
Minus sunt, reiciendis est similique eveniet numquam iusto in placeat neque eaque laborum recusandae sapiente officiis vero rem obcaecati ab dolores. Natus repudiandae ad perferendis veniam similique id sed impedit!
Corporis dicta facere consectetur nam doloremque asperiores illum error suscipit vel nesciunt quasi blanditiis tempore eaque quam laborum eveniet quod nemo, pariatur omnis officiis, quaerat nobis? Eius neque commodi amet.
Voluptate hic non sint quidem amet ullam quod reprehenderit est molestias? Aut, voluptatum, exercitationem? Non dolore ratione aperiam repellendus sed fugiat necessitatibus quam, delectus cupiditate, dolorem neque vitae quidem doloremque!
Distinctio velit nobis officiis, sit quos cupiditate obcaecati accusamus illum et adipisci tenetur dolore ab dolores quis modi recusandae ut, eos cum minima commodi. Suscipit commodi, dolore consectetur iste nemo?
Velit corporis, rem tempora cum quasi dolor, neque impedit laboriosam dolores similique optio, eius, aperiam inventore dignissimos saepe. Similique vel aspernatur sit ea sunt veniam officiis fugit rem voluptates eum.
Dicta nesciunt dolores saepe repellendus officiis non explicabo placeat consequuntur inventore sint dolor debitis consectetur perferendis quod atque tempora dolorum molestiae, dignissimos praesentium fuga, a autem voluptate. Ullam aliquid, fuga.
Modi laudantium mollitia, fugit repellat. Molestias asperiores error omnis laboriosam expedita architecto quod vel doloremque rerum culpa ipsa reprehenderit similique aliquid ex facilis quidem aperiam deserunt, repudiandae porro dolore maxime.
Libero impedit quae optio quasi iste aperiam nam nostrum temporibus repellat obcaecati aspernatur repudiandae, eaque aliquam autem iure, molestias itaque similique adipisci eius aliquid ab esse delectus totam accusantium quis!
At possimus, iusto architecto minima atque a illum eos adipisci ut nesciunt, asperiores molestias ratione, eaque nihil placeat. Saepe facilis molestiae esse ipsa dolor ratione quisquam facere provident voluptates veritatis.
Non et, hic aperiam natus obcaecati, blanditiis maiores voluptates officia minus quibusdam dolore praesentium nam laboriosam earum provident reiciendis dicta explicabo vel itaque ut repellat iure, at, eos repudiandae! Autem.
Molestiae sed, ea quam veniam. Totam deleniti voluptatibus quae veritatis officiis blanditiis, temporibus in vel! Minus nesciunt qui optio aut quis alias non beatae. Molestias voluptate expedita consequuntur nisi iusto.
Tempora sed deserunt consequuntur, unde, id sequi ex illo sapiente at repellat laboriosam reiciendis voluptate maxime ratione cum in obcaecati inventore ad, odit neque fuga esse. Tenetur dolorem nam quia.
Illum numquam facilis ipsum quidem dicta perferendis nulla adipisci omnis in quam accusamus, corrupti iusto, unde soluta eum laborum vero fuga quia. Cum quas numquam reiciendis, rem non in tempore?
Aspernatur, laborum, repellendus? Officiis, quibusdam? Eius, perspiciatis officia recusandae pariatur reprehenderit delectus ipsa excepturi fugit minus, dolore dolorum amet sunt, iure aperiam autem explicabo sit odio nihil! Temporibus odit, debitis!
Dicta, magnam, fugit. Amet ducimus suscipit fugit esse eum, earum, reprehenderit, dolor, placeat sequi illum facilis consectetur quaerat quasi neque rerum. Velit sequi culpa, nulla quasi labore nisi obcaecati ipsam.
Pariatur itaque nemo mollitia officia, quaerat odio, ratione illum vero, eveniet sit incidunt facere atque saepe quos eum deleniti laudantium eaque earum veniam inventore minima repellat expedita voluptas. Quae, inventore.
Nostrum suscipit praesentium dolores veniam ullam quasi harum, voluptatum possimus maxime! Dolores, cumque quia aut vitae maxime. Non repellat maxime iure nemo voluptatum cum et odit harum omnis! Itaque, similique.
Repellendus similique et molestiae est necessitatibus voluptatum repellat assumenda, officiis doloremque, officia accusantium beatae provident deleniti, perspiciatis debitis ipsum culpa itaque sunt nisi impedit magni totam eveniet alias nihil rerum.
In asperiores nobis quas perferendis cupiditate molestias quod commodi tempore ea, voluptatum debitis saepe nemo nesciunt adipisci quam voluptatem inventore. Magni reiciendis itaque praesentium quod aliquam debitis nobis sequi ea.
Commodi iusto rem laboriosam, quam deleniti autem eligendi cupiditate ab, nesciunt placeat voluptate deserunt aspernatur eos iure voluptas! Nisi, nobis? Eum et, cum, expedita pariatur placeat possimus ad nulla necessitatibus!
Odio alias animi quis, minima nulla incidunt est vel, laborum hic maiores quia error consectetur assumenda atque, temporibus maxime corporis cum vitae commodi consequuntur beatae. Sint odio placeat culpa, hic.
Ipsum earum, fugiat illo, sint eos nostrum autem distinctio, fuga facilis, repellat cum! Maxime sint magnam repellat labore molestiae aliquam ipsa incidunt cumque quam harum officiis, voluptas, recusandae commodi! Aliquam!
Animi soluta reiciendis ullam, tempore inventore dolores illum nobis expedita ut, asperiores error nemo eveniet vero iste consequuntur facilis, porro consectetur repudiandae odit optio. Ipsa corrupti sapiente consectetur omnis, officia.
Commodi iste dolores natus, magnam, alias officia voluptatum quia unde corporis, ad vero! Consequatur iusto doloribus voluptates, sint, aliquid, odit quos aspernatur natus perspiciatis id recusandae doloremque voluptate, a accusantium.
Eum magnam quasi, ratione sit assumenda. Voluptas distinctio, illo consequuntur nihil veniam doloribus dolor quisquam optio, accusantium dolorem. Distinctio error sit delectus, ab natus eveniet atque ipsam, molestias debitis eum!
Impedit quidem similique quos amet rerum, blanditiis, dolor eum natus nostrum facilis sit fuga dicta suscipit praesentium, adipisci nesciunt quibusdam laborum? Facilis facere voluptatum id eaque voluptatem maxime odio eveniet.
Фон фіксується з урахуванням поведінки елемента. Якщо елемент має прокручування, то фон прокручуватиметься разом із вмістом, але фон, що виходить за рамки елемента, залишається на місці.
CSS код:
.block{
background: url('img/background/bg.webp') 0 0 no-repeat local;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: local;
}
Background-size
Масштабує фонове зображення згідно з заданими розмірами. У цифрах, де перше значення (відсотки, px) визначає ширину, друге – висоту. Або спеціальним значенням.
Розміри зображення за замовчуванням
CSS код:
.block{
background: url('img/background/bg.webp') 0 0/auto auto no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto auto;
}
Розміри картинки по ширині блоку
CSS код:
.block{
background: url('img/background/bg.webp') 0 0/100% auto no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
}
Розміри картинки по висоті блоку
CSS код:
.block{
background: url('img/background/bg.webp') 0 0/auto 100% no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto 100%;
}
Розтягуємо картинку на всю ширину та висоту блоку
CSS код:
.block{
background: url('img/background/bg.webp') 0 0/100% 100% no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
Масштабує зображення зі збереженням пропорцій таким чином, щоб картинка цілком помістилася всередину блоку. Тобто по меншій стороні картинки
CSS код:
.block{
background: url('img/background/bg.webp') 0 0/contain no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
Масштабує зображення зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині або висоті блоку. Тобто по більшій стороні картинки
CSS код:
.block{
background: url('img/background/bg.webp') 0 0/cover no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
}
Встановлюємо конкретні розміри. Якщо встановлено одне значення, воно задає ширину фону, друге значення приймається за auto. Пропорції картинки при цьому зберігаються. Використання двох значень через пробіл задає ширину і висоту фонової картинки
CSS код:
.block{
background: url('img/background/bg.webp') 0 0/200px 150px no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/bg.webp');
background-position: 0 0;
background-repeat: no-repeat;
background-size: 200px 150px;
}
Встановлення кількох фонових зображень для блоку
Властивість background дає змогу задати кілька фонових зображень одному блоку, до того ж зі своїми налаштуваннями позиціювання, масштабування і прокручування. Вказувати значення слід через кому.
Колір фону + одна картинка + не повторювати
CSS код:
.block{
background: #18b5a4 url('img/background/avatar.webp') no-repeat;
}
Альтернативний CSS код:
.block{
background-color: #18b5a4;
background-image: url('img/background/bg.webp');
background-image: url('img/background/bg.webp');
}
Дві картинки, у кожної свої налаштування. Кожна наступна лягає під попередню
CSS код:
.block{
background: url('img/background/avatar_3.webp') left no-repeat, url('img/background/bg.webp') 50%/cover no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar_3.webp'), url('img/background/bg.webp');
background-repeat: no-repeat;
background-position: left,50%;
background-size: auto auto, cover;
}
Три картинки, у кожної свої налаштування. Кожна наступна лягає під попередню
CSS код:
.block{
background: url('img/background/avatar_2.webp') right/50px no-repeat, url('img/background/avatar_3.webp') left no-repeat, url('img/background/bg.webp') 50%/cover no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar_2.webp'), url('img/background/avatar_3.webp'), url('img/background/bg.webp');
background-repeat: no-repeat;
background-position: right, left, 50%;
background-size: 50px, auto auto, cover;
}
Чотири картинки, у кожної свої налаштування. Кожна наступна лягає під попередню
CSS код:
.block{
background: url('img/background/avatar.webp') 0 0/50px no-repeat, url('img/background/avatar_2.webp') 100% 100%/50px no-repeat, url('img/background/avatar_3.webp') 50% no-repeat, url('img/background/bg.webp') 50%/cover no-repeat;
}
Альтернативний CSS код:
.block{
background-image: url('img/background/avatar.webp'), url('img/background/avatar_2.webp'), url('img/background/avatar_3.webp'), url('img/background/bg.webp');
background-repeat: no-repeat;
background-position: 0 0, 100% 100%, 50%, 50%;
background-size: 50px, 50px, auto auto, cover;
}
Повернутися назад
№9
Уроки HTML CSS JS
CSS властивість background
Фон для сайту
CSS властивість background. Фон для сайту
Шпаргалка є доповненням до випуску:
