коротка інформація

Версії CSS

Значення

url Як значення використовується шлях до графічного файлу, який вказується всередині конструкції url(). Шлях до файлу при цьому можна писати як у лапках (подвійних чи одинарних), так і без них. none Скасує зображення фону для елемента. inherit Наслідує значення батька.

HTML5 CSS2.1 IE Cr Op Sa Fx

Об'єктна модель

document.getElementById("elementID ").style.backgroundImage

Браузери

Internet ExplorerДо версії 7.0 включно застосовується фон до внутрішньої частини межі елемента, у якого встановлено властивість hasLayout . Якщо елемент не має hayLayout , властивість background-image буде враховувати межі елемента, як це і задано в специфікації. Різниця у відображенні буде помітна, якщо межі пунктирні (dashed або dotted), а не суцільні.

Якщо для елемента значення встановлено як scroll або auto , Internet Explorer 8 буде вертикальна затримка в один піксел при прокручуванні фону.

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Якщо фон задається для рядка таблиці (тег ), то Chrome, Safari, iOS відображають його не так, як наказує специфікація, а саме для кожного осередку окремо. У той час як браузер повинен показувати цілісний фон для цілого ряду. У прикладі 2 наведено код, що демонструє помилку.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Результат цього прикладу в браузері Chromeпоказано на рис. 1. Браузер Internet Explorer, Opera та Firefox коректно відображають фон для рядка (рис. 2).

Рис. 1. Повторення фону для кожного осередку

Рис. 2. Фон для всього рядка

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

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

background-color

Я більш ніж впевнений, що ви вже неодноразово робили призначення кольору фону. Зробити це можна використовуючи кілька видів запису: звичайний (використовується назва кольору), шістнадцятковий або RGB-запис. Кожен тип рівнозначний, використовуйте який більше подобається. Я намагаюся використовувати найбільш короткий варіант, і для сприйняття простіше і файл стилів трохи менше виходить розміром.

P (background-color: red;) p (background-color: #f00;) p (background-color: #ff0000;) p (background-color: rgb(255, 0, 0;))

У CSS3 впроваджена підтримка прозорості, тому можна додати її до нашого кольору, наприклад так:

P (background-color: rgba(255, 0, 0, 0.5);)

Останньою цифрою встановили прозорість 50%. Можна встановити значення прозорості від 0 (повністю прозорий фон) до 1 (повністю непрозорий).

background-image

Ця властивість теж використовується дуже часто, дозволяє надавати фону зображення. У CSS3 додано можливість присвоювати фону кілька зображень, причому кожне створює своєрідний шар, тому кожне наступне накладається на попереднє. Навіщо це може стати в нагоді? Все досить просто - припустимо, потрібно прикрутити рюшечки в кожному з кутів сайту. За умови більш-менш гумової версткивикористовувати одне зображення – не варіант. Тому робимо 4 «шари», кожне зображення рухаємо у свій кут і на цьому все, завдання вирішено

Body (background-image: url("image1"), url("image2"), url("image3"))

Якщо потрібно призначити одне зображення на тлі — у коді залишаємо лише перше, гадаю, це зрозуміло.
Використовуючи будь-які зображення як фон слід пам'ятати два правила:

• задайте контрастний колір фону на той випадок, якщо у користувача з якихось причин не з'явиться зображення. Він може банально вимкнути відображення картинок, заощаджує трафік.
• не використовуйте фонове зображення для передачі будь-якого важливої ​​інформації. Через зазначену вище, користувач може і не побачити.

Підтримка кількох зображень для фону досить широка. Всі браузери, навіть IE8, підтримують цю властивість.

background-image: | none; background-image: | none | inherit; background-image: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | none

Опис

Властивість background-image(від англ. "background image" - "фонове зображення") встановлює фонове зображення елемента.

Примітка

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

Умови використання

Починаючи з CSS3 (через кому) можна вказати відразу кілька фонових зображень. При цьому нижні фонові зображеннябудуть видно через прозорі області верхніх фонових зображень.

JavaScript

[об'єкт] .style .backgroundImage = "[значення]";

Підтримка браузерами

Специфікація

Значення

Всі значення CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

None Вказує на відсутність фонового зображення. url( ) Вказує рядок URI-адреси зображення всередині «url(...)».

background-image: url(myImage.png);

Url(" ") Вказує рядок URI-адреси зображення всередині « url(...) ».

background-image: url("myImage.png");

Inherit Вказує, що елемент повинен успадкувати параметри батьківського елемента.

Початкове значення:"none".

Приклад використання

Лістинг коду

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

Документ із кількома фоновими зображеннями.

> Властивість background-image>

Дизайн сайту починається з тла.

Коректно прописати колір біля фону – властивість background-color, для підстрахування, якщо не завантажиться зображення. У дужках url ()вказати шлях до папки з зображеннями.

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

Простий варіант, щоб позбутися "кахельності", це використовувати картинку з великими розмірами, не менше 1024 px завширшки, щоб вона заповнила собою весь екран. Теж буде гарним рішеннямзнайти безшовну текстуру, при розмноженні якої малюнок буде як одне ціле.

Як зробити фон привабливішим?

Слава Богу, у нас для цього є помічники:

• no-repeat- Заборонити повтор
• repeat-x- Повторення малюнка тільки по горизонталі
• repeat-y- Повторення малюнка тільки по вертикалі

Наприклад:

Шапка блогу

Це фонова текстура з повторенням лише по горизонталі.

Наступний помічник – властивість background-positionдозволяє позиціонувати фонову картинку в будь-якому місці екрана. Цей прийом широко поширений у сучасному веб-дизайні. У нас є картинка, але вона не частина контенту, а служить лише як прикраса сайту.

Заголовок

Приклад фону, що неповторюється, із заданим позиціонуванням.

Зображення відображається лише один раз і знаходиться праворуч.

Задано відступ від правого краю в 200 px, щоб уникнути наїзду тексту на тлі.

Якщо ми хочемо, щоб зображення завжди було видно при прокручуванні екрана вниз, треба додати в код вище властивість - background-attachment: fixed;

В чому різниця між imgі background-image?

Різниця принципова, тег imgвставляється безпосередньо в тіло HTML-сторінки та відповідає за зміст (ілюстрації, фотографії, аватарки), несе смислове навантаження. Дуже важливо, щоб картинка була проіндексована пошуковими системамиі потрапила у пошукову видачу. Властивості CSS background-image– роблять сайт унікальним та красивим, тобто це оформлення, яке слід виносити у зовнішній файл CSSстилів або використовувати всередині елемент style.

Звичайно, це не означає, що background-imageне працюватиме, якщо його помістити в тіло HTML-Сторінки. Але я настійно рекомендую все, що стосується дизайну виносити в CSS. В результаті ми отримаємо чистий HTML-код:

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

Ну ось ми і розглянули всі варіанти з використанням якості. CSS background-image. Більше практики друзі! Сміливо копіюйте код та вигадуйте свої варіанти!