Урок 13. Робота з зображеннями. Частина 1

Здрастуй, шановний читачу.

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

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку
Урок 12. Конфлікти полів

Теорія та практика

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

Фон у виді кольору

Фон у вигляді кольору задається і для того щоб, якщо користувач зайшов з відключеними картинками йому не показувався білий фон. Колір фону в CSS задається властивістю background-color. Розглянемо на прикладі:

123456789101112

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content1"gt; текстlt;/divgt;lt;/bodygt;lt;/htmlgt;

Відео: Scribus. Урок 7: Робота з зображеннями

Задамо колір фону для всієї сторінки світло-рожевий, а для блоку - блакитний.

12345678

body{background-color:# FFC4C4- / * Світло-рожевий колір * /}# content1{background-color:# C4D4FF- / * Блакитний колір * /height:150px-}

Як це виглядає в браузері:

Фон у вигляді зображення

Для прикладу візьмемо наступний html код:

123456789101112

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content"gt; Тут вставте багато тексту!lt;/divgt;lt;/bodygt;lt;/htmlgt;

Вставимо на фон велике зображення:

12345678

body{background-image:url(`Bg.jpg`)- / * Зображення для фону * /}#content{width:600px-margin:0 auto-}

Подивитися прімерСкачать

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

1234567891011

body{background-image:url(`Bg.jpg`)- / * Зображення для фону * /background-repeat:no-repeat- / * Забороняємо повтор зображення * /background-attachment:fixed- / * Фіксуємо зображення * /background-color:#cccccc- / * Задаємо фон, якщо зображення на сторінці відключені * /}#content{width:600px- / * Задаємо ширину блоку * /margin:0 auto- / * Розміщуємо блок по центру * /}

Ось як це виглядає в браузері:

Відео: Технології Web-дизайну. Зображення. Частина 2. Урок 13

Подивитися прімерСкачать

А зараз розглянемо повтор фонового зображення. Для прикладу візьмемо той же код html сторінки:

123456789101112

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content"gt; Тут вставте багато тексту!lt;/divgt;lt;/bodygt;lt;/htmlgt;

В CSS пропишемо (але замість bg.jpg у нас картинка маленька, яка в подальшому буде повторюватися):

123456789

body{background-image:url("Bg.jpg `)- / * Зображення для фону * /background-repeat:no-repeat- / * Забороняємо повтор зображення * /}#content{width:600px- / * Задаємо ширину блока * /margin:0 auto- / * Розміщуємо блок по центру * /}

Якщо ми напишемо в такий спосіб то у браузері побачимо:

Тому щоб зробити так щоб зображення повторювалося в CSS потрібно написати наступне:

123456789

body{background-image: url(`Bg.jpg`)- / * Малюнок, клацніть по фону * /background-repeat: repeat- / * Повторюємо зображення * /}#content{width: 600px- / * Задаємо ширину блоку * /margin:0 auto- / * Розміщуємо блок по центру * /}

Як це виглядає в браузері:

Подивитися прімерСкачать

Як бачите тут все дуже просто. Спробуйте вставляти різні зображення і дивитися що вийти. На цьому урок закінчений. Питання пишіть в коментарях.

Більше практикуйтеся!