Меню Закрити

Як зробити фон сторінки

admin 0 коментарів

Як у HTML задати тло сторінки?

Щоб встановити картинку як фон у HTML, можна використовувати властивість background-image у CSS. У цьому прикладі властивість background-image визначає шлях до файлу зображення. Властивість background-repeat встановлює, як повторюватиметься зображення.

Як зробити заднє тло на всю сторінку?

Перший спосіб – використання CSS властивості background-size. Якщо ви хочете зробити картинку тлом сторінки, ви можете задати її через CSS і задати властивість background-size: cover. Це дозволить картинці розтягнутися на всю ширину та висоту екрана, зберігши пропорції зображення.

Як правильно встановити фон сторінки?

Колір фону веб-сторінки визначається за допомогою атрибуту bgcolor тега <body>. Колір можна вказувати у шістнадцятковому значенні або на його ім'я. Незважаючи на те, що для фону можна вказувати будь-який колір, на більшості сайтів використовуються переважно білий фон і чорні літери як найбільш усталений варіант.

YouTube
Як змінити фон сторінки у Ворді? – YouTube

Як зробити картинку тлом у HTML та CSS. 3 простих способу

Вітаю. У цій статті я хочу розповісти про три способи розміщення зображення як фон всієї сторінки за допомогою лише HTML + CSS (без використання JS).

Отже, вимоги до фонового зображення у нас такі:

  • Покривається 100% ширини та висоти сторінки
  • Фон масштабується за потреби (background розтягується або стискається залежно від розмірів екрану)
  • Зберігаються пропорції картинки (aspect ratio)
  • Зображення центроване на сторінці
  • Фон не викликає скролів
  • Рішення максимально кроссбраузерне
  • Не використовуються інші технології крім CSS

design-development-electronics-326424.jpg

Спосіб 1

На мій погляд, це найкращий спосіб, адже він найпростіший, лаконічний та сучасний. Він використовує властивість CSS3 background-size, яку ми застосовуємо до тега html. Саме html, а чи не body, т.к. його висота більша або дорівнює висоті вікна браузера.

Встановлюємо фіксований та центрований фон, потім коригуємо його розмір, використовуючи background-size: cover .

Chrome (будь-яка версія) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Для того, щоб зображення завантажувалися швидко, розміщуйте свої сайти тільки у перевірених хостинг-провайдерів, наприклад Beget.com Користувачі та пошукові системи люблять швидкі сайти.

Спосіб 2

Цей спосіб передбачає використання елемента img, розмір якого змінюватиметься залежно від розміру вікна браузера. Щоб розтягнути зображення на весь екран, необхідно задати min-height і width зі значенням 100%. А щоб зображення не стискалося до меншого розміру, ніж оригінальний, встановимо min-width зі значенням рівним ширині картинки.

Якщо ширина вікна буде меншою за ширину зображення, буде використовуватися media query для вирівнювання бекграунду по центру.

Спосіб 3

Ще один спосіб полягає в наступному: фіксуємо зображення до лівого верхнього кута сторінки і розтягуємо його за допомогою властивостей min-width та min-height 100%, зберігаючи при цьому співвідношення сторін.

Щоправда, при такому підході картинка не центрується. Але ця проблема вирішується загортанням картинки в , який ми робимо вдвічі більше розміру вікна. А саме зображення ми розтягуємо та поміщаємо по центру.

Цей спосіб працює в хороших браузерах та IE 8+.

Сподіваюся, ця інформація буде для Вас корисною.Особисто я часто користуюся цими способами, особливо першим. Напевно, є й інші способи помістити зображення на задній фон за допомогою CSS. Якщо Ви про них знаєте, поділіться, будь ласка, коментарі.

Фон та кордону

У цьому уроці ми розглянемо деякі цікаві можливості, які ви можете зробити за допомогою CSS-властивостей фону та кордонів. Завдяки додаванню градієнтів, фонових зображень та закруглених кутів властивості фону та кордонів дадуть відповідь на багато питань стилізації в CSS.

Необхідні вміння:Базова комп'ютерна грамотність, основне програмне забезпечення, розуміння роботи з файлами, базові знання HTML (див. Введення в HTML) та уявлення про те, як працює CSS (див. Введення в CSS).
Ціль:Навчитися стилізації фону та межі об'єктів.

Стилізація фону в CSS

CSS-властивість background є скороченням для ряду повних властивостей фону, з якими ми познайомимося у цьому уроці. Якщо ви виявите складну властивість background у таблиці стилів, це може здатися важким для розуміння, оскільки одночасно може бути передано так багато значень.

.box  background: linear-gradient( 105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96% ) центр центр / 400px 200px no-repeat, url(big-star.png) центр no-repeat, rebeccapurple; >

Ми повернемося до того, як працює скорочення пізніше, а поки давайте поглянемо на різні речі, які ви можете робити з фоном у CSS, подивившись окремі властивості background .

Фоновий колір

Властивість background-color визначає колір фону для будь-якого елемента CSS. Властивість приймає будь-який допустимий колір. background-color поширюється сам контент і відступи від нього (padding).

У наведеному нижче прикладі ми використовували різні значення кольору, щоб додати колір фону до блоку, заголовку та елементу .

Пограйте з ними за допомогою будь-якого доступного значення .

Фонове зображення

Властивість background-image дозволяє відображати зображення як фон елемента. У наведеному нижче прикладі ми маємо два блоки — в одному фонове зображення більше, ніж розміри блоку, а в іншому — маленьке зображення зірки.

Цей приклад демонструє дві особливості фонових зображень. За замовчуванням велике зображення не масштабується до розміру блоку, тому ми бачимо лише його невеликий кут, у той час, як маленьке зображення повторюється, щоб заповнити весь блок. У нашому випадку було використано зображення однієї маленької зірки.

Примітка: Якщо крім фонового зображення ви додали фоновий колір, зображення відображатиметься над кольором. Спробуйте додати властивість background-color до наведеного вище прикладу, щоб побачити це в дії.

Властивість background-repeat

Властивість background-repeat використовується для керування повтореннями фонового зображення. Доступні значення:

  • no-repeat – зупиняє повторення фонового зображення у всіх напрямках.
  • repeat-x – Повторення фонового зображення по горизонталі.
  • repeat-y – Повторення фонового зображення по вертикалі.
  • repeat – повторення фонового зображення в обох напрямках. Встановлено за замовчуванням.

Спробуйте ці значення на прикладі нижче. Ми встановили значення no-repeat, тому ви бачите лише одну зірку. Спробуйте різні значення – repeat-x і repeat-y — щоб побачити, які ефекти вони роблять.

Зміна розміру фонового зображення

У наведеному вище прикладі у нас є велике зображення, яке зрештою було обрізане, оскільки воно більше, ніж елемент, тлом якого воно є. У цьому випадку ми могли б використовувати властивість background-size , яка може набувати значення довжини або у відсотках, щоб розмір зображення відповідав розміру фону.

Ви також можете використовувати ключові слова:

  • cover – браузер зробить зображення досить великим, щоб воно повністю заповнило блок, зберігаючи при цьому співвідношення сторін. У цьому випадку частина зображення, швидше за все, опиниться поза блоком.
  • contain – браузер зробить зображення потрібного розміру, щоб поміститися в блоці. У цьому випадку можуть з'явитися пробіли з обох сторін або згори та знизу зображення, якщо співвідношення сторін зображення відрізняється від співвідношення сторін блоку.

Нижче я застосував значення довжини розмірів зображення. Дивіться, як це спотворило зображення.

У наведеному прикладі я використовував велике зображення з раніше розглянутого прикладу і вказав значення довжини, щоб визначити його розмір всередині блоку. Ви можете подивитися, як це спотворило зображення.

  • Змініть значення довжини для зміни розміру фону.
  • Змініть значення довжини background-size: cover або background-size: contain .
  • Якщо зображення менше розмірів блоку, ви можете змінити значення властивості background-repeat , щоб повторити зображення.

Позиціонування фонового зображення

Властивість background-position дозволяє змінювати позицію, в якій фонове зображення з'являється в блоці. При цьому використовується система координат, у якій лівий верхній кут блоку дорівнює (0,0), а сам блок розташовується вздовж горизонтальної (x) і вертикальної (y) осей.

Примітка: За промовчанням значення background-position дорівнює (0,0) .

Зазвичай властивість background-position задають у вигляді двох послідовних значень – значення по горизонталі, за яким слідує значення по вертикалі.

Ви можете використовувати такі ключові слова, як top і right (з іншими можете ознайомитися на сторінці background-position ):

.box  background-image: url(star.png); background-repeat: no-repeat; background-position: top center; > 
.box  background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; >

Ви також можете змішувати значення ключових слів із довжинами або відсотками, наприклад:

.box  background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; >

І нарешті, ви також можете використовувати синтаксис із чотирма значеннями, щоб вказати відстань від певних країв блоку – одиниця довжини в даному випадку є зміщенням від значення ключового слова. Отже, у CSS нижче ми змістили фон на 20 пікселів зверху та на 10 пікселів праворуч:

.box  background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; >

Використовуйте наведений нижче приклад, щоб поекспериментувати з цими значеннями та перемістити зірку всередині блоку.

Примітка: background-position — це скорочення для background-position-x та background-position-y (en-US)які дозволяють вам встановлювати різні значення положення по осі індивідуально.

Градієнт як фон

Градієнт – при використанні для фону – діє так само, як зображення, і тому задається властивістю background-image.

Ви можете прочитати більше про різні типи градієнтів і про те, що ви можете з ними робити на сторінці MDN для типу даних (en-US) . Пограти з градієнтами ви можете за допомогою одного з багатьох генераторів градієнтів CSS, доступних в Інтернеті, наприклад цей. Ви можете створити градієнт, а потім скопіювати та вставити його у свій код.

Спробуйте використати різні градієнти на прикладі нижче. У двох блоках відповідно ми маємо лінійний градієнт, розтягнутий на весь блок, і радіальний градієнт із заданим розміром, який тому повторюється.

Декілька фонових зображень

Також можна створювати кілька фонових зображень – просто розділивши значення якості background-image комами.

Коли ви зробите це, відбудеться накладення фонових зображень один на одного. Фонові зображення будуть накладені шарами, де кожне нове тло зображення, перераховане в коді, буде накладатися поверх раніше вказаного зображення.

Примітка: Градієнти можна легко змішувати із звичайними фоновими зображеннями.

Інші властивості background- * також можуть мати значення, розділені комами, як і background-image :

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;

Кожне значення різних властивостей буде відповідати значенням тієї ж позиції в інших властивостях.Вище, наприклад, значення background-repeat для image1 буде no-repeat. Однак що відбувається, коли різні властивості мають різну кількість значень? Відповідь полягає в тому, що менша кількість значень циклічно повторюватиметься – у наведеному вище прикладі є чотири фонових зображення, і тільки два значення background-position . Перші два значення позиції будуть застосовані до перших двох зображень, потім вони будуть циклічно повторюватися – image3 буде присвоєно перше значення позиції, а image4 буде присвоєно друге значення позиції.

Пограємось? У наведеному нижче прикладі я додав два зображення. Щоб продемонструвати порядок накладання, спробуйте змінити порядок фонових зображень у списку. Або пограйте з іншими властивостями, щоб змінити положення, розмір чи повторюваність значень.

Закріплення фону

Інша опція, яку можна застосувати до фону, – це вказати, як він прокручуватиметься при прокручуванні вмісту. Це контролюється за допомогою властивості background-attachment, яка може приймати наступні значення:

  • scroll : Примушує елементи фону прокручуватися під час прокручування сторінки. Якщо прокручується вміст елемента, фон не переміщується. Фактично, фон фіксується в тій же позиції на сторінці, тому прокручується в міру прокручування сторінки.
  • fixed : Фіксує елементи фону в області перегляду, щоб він не прокручувався при прокручуванні сторінки або вмісту елемента. Фон завжди буде залишатися на тому самому місці на екрані.
  • local : Це значення було додано пізніше (воно підтримується тільки в Internet Explorer 9+, тоді як інші підтримуються в IE4+), тому що значення scroll є досить заплутаним і в багатьох випадках дійсно не робить те, що ви хочете. Значення local фіксує фон для елемента, до якого він застосований, тому коли ви прокручуєте елемент, фон прокручується разом з ним.

Властивість background-attachment діє лише тоді, коли є контент для прокручування, тому ми зробили приклад, щоб продемонструвати різницю між трьома значеннями – погляньте на background-attachment.html (також дивися вихідний код тут).

Використання скороченої властивості background

Як я згадував на початку цього уроку, ви часто бачитимете фон, заданий за допомогою властивості background . Це скорочення дозволяє одночасно встановлювати всі різні властивості.

При використанні декількох фонів необхідно вказати всі властивості першого фону, а потім додати наступний фон після коми. У наведеному нижче прикладі ми маємо градієнт з розміром та положенням, потім фонове зображення зі значенням no-repeat та положенням, потім колір.

При записі скорочених значень фонового зображення необхідно дотримуватися кількох правил, наприклад:

  • background-color можна вказувати лише після останньої коми.
  • Значення background-size можуть бути включені тільки після background-position , розділені символом '/', наприклад: center/80% .

Відвідайте сторінку MDN властивості

, щоб побачити повний опис.

Доступність перегляду

Поміщаючи текст поверх фонового зображення або кольору, ви повинні подбати про те, щоб у вас було достатньо контрасту, щоб текст читався для відвідувачів вашого сайту. Якщо вказується зображення, і текст буде поміщений поверх цього зображення, ви повинні вказати background-color , який дозволить тексту бути розбірливим, якщо зображення не завантажується.

Програми читання з екрана не можуть аналізувати фонові зображення, тому вони мають бути чисто декоративними; будь-який важливий контент повинен бути частиною HTML-сторінки, а не бути у фоні.

Межі

Вивчаючи блокну модель, ми виявили, як межі впливають на розмір нашого блоку. На цьому уроці ми розглянемо, як творчо використовувати кордони. Зазвичай, коли ми додаємо межі до елемента за допомогою CSS, ми використовуємо скорочену властивість, яка встановлює колір, ширину та стиль кордону в одному рядку CSS.

Ми можемо встановити кордон для всіх чотирьох сторін блоку за допомогою border:

.box  border: 1px solid black; >

Або ми можемо націлюватися на один край блоку, наприклад:

.box  border-top: 1px solid black; >

Індивідуальні властивості цих скорочень будуть такими:

.box  border-width: 1px; border-style: solid; border-color: black; > 
.box  border-top-width: 1px; border-top-style: solid; border-top-color: black; >

Примітка: Властивості кордонів top, right, bottom, та left також мають порівняні логічні властивості, які відносяться до режиму написання документа (наприклад, текст зліва направо, праворуч наліво або зверху донизу). Ми розглянемо їх у наступному уроці, який стосується роботи з різними напрямками тексту.

Є багато стилів, які ви можете використовувати для кордонів.У цьому прикладі ми використовували різні стилі кордонів для чотирьох сторін мого блоку. Пограйте зі стилем, шириною та кольором кордону, щоб побачити, як вони працюють.

Закруглені кути

Закруглення кутів блоку досягається за допомогою властивості border-radius та пов'язаних властивостей, які відносяться до кожного кута блоку. Як значення можуть використовуватися два значення довжини або відсотка: перше значення визначає горизонтальний радіус, а друге вертикальний радіус. Найчастіше задають лише одне значення, яке використовується для обох.

Наприклад, щоб зробити всі чотири кути блоку радіусом 10px:

Або верхній правий кут мав горизонтальний радіус 1em і вертикальний радіус 10%:

.box  border-top-right-radius: 1em 10%; >

У прикладі нижче ми встановили всі чотири кути, а потім змінили значення верхнього правого кута, щоб зробити його іншим. Ви можете грати зі значеннями, щоб змінити кути. Погляньте на сторінку властивостей для border-radius, щоб побачити доступні варіанти синтаксису.

Вправа з межами та фоном

Щоб перевірити свої нові знання, спробуйте створити наступне, використовуючи фон і межі, використовуючи наведений нижче приклад як відправна точка:

  1. Встановіть рамку 5px black solid, із закругленими кутами 10px.
  2. Додати фонове зображення (використовуйте URL balloons.jpg ) та встановіть розмір таким чином, щоб він покрив весь блок.
  3. Встановіть для напівпрозорого чорного кольору фону і зробіть текст білим.

Примітка: ви можете подивитися рішення тут – але спочатку спробуйте зробити це самі!

Підсумки

У цій темі ми розглянули досить багато, але, як ви можете побачити, можливостей зі стилізації фону або меж блоку набагато більше.Вивчіть різні сторінки властивостей, якщо хочете дізнатися більше про будь-які функції, які ми обговорювали. На кожній сторінці MDN є багато прикладів використання властивостей, з якими ви можете пограти та розширити свої знання.

У наступному уроці ми дізнаємося, як Режим написання документа взаємодіє з вашим CSS. Що відбувається, якщо текст не перетікає зліва направо?

У цьому модулі

  1. Каскад та успадкування
  2. Селектори CSS
    • Селектори типу, класу та ID
    • Селектори атрибуту
    • Псевдокласи та псевдоелементи
    • Комбінатори
  3. Модель коробки
  4. Фон та кордону
  5. Зміна напряму тексту
  6. Перекриття вмісту
  7. Значення властивостей CSS
  8. Зміна розмірів у CSS
  9. Зображення, форми та інші медіа-елементи
  10. Стилізація таблиць
  11. Налагодження CSS
  12. Організація CSS-коду (en-US)

Found a content problem with this page?

Ця сторінка була останньою modified на 3 серп. 2023 by MDN contributors.

Ваш blueprint for better internet.