Сучасні браузери дозволяють додавати до елемента довільне число фонових зображень, перераховуючи параметри кожного фону через кому. Досить скористатися універсальним властивістю background і вказати для нього спочатку один фон та через кому-другий.
Для масштабування фону призначене властивість background-size, як його значення вказується 100%, тоді фон буде займати всю ширину вікна браузера. Для старих версій браузерів слід використовувати специфічні властивості з префіксами, як показано в прикладі 1.
Щоб додати фонову картинку на веб-сторінку, вкажіть шлях до зображення всередині значення url стильового властивості background, яке в свою чергу додається до селектору body.
Мультиплікація це досить сильний прийом, здатний пожвавити будь-який документ, тому не дивно, що величезну популярність набула технологія Flash, яка додає на веб-сторінки мультики, до того ж інтерактивні. Графічний формат GIF також підтримує просту анімацію шляхом послідовної зміни кадрів. Так що використовуючи зображення в цьому форматі допустимо анімувати не тільки окремі картинки, але також фон веб-сторінки або певного елемента.
Спочатку потрібно створити анімовану картинку у форматі GIF, для чого можна скористатися програмою Adobe Photoshop або інший підходящої для цієї мети. Також існують бібліотеки готових анімованих файлів, які можна застосовувати в якості фонової картинки. Далі зображення додається в якості фону за допомогою стильового властивості background, як показано в прикладі 1.
Для управління положенням фонового малюнка на сторінці застосовується стильове властивість background-position, воно одночасно встановлює координати зображення по горизонталі і вертикалі. Щоб скасувати повторення фонової картинки використовується властивість background-position зі значенням no-repeat.
За замовчуванням фонова картинка повторюється по горизонталі і вертикалі, шикуючись мозаїкою на всьому полі веб-сторінки. Проте така поведінка фону не завжди потрібно, особливо у разі розміщення єдиного зображення, тому на допомогу прийде значення no-repeat, що додається до стильовому властивості background.
Повторення фону зазвичай потрібно для створення декоративних ліній або градієнтів, прив'язаних до висоті елемента або вікна веб-сторінки. У таких випадках повторення фону по вертикалі забезпечує цілісну картинку незалежно від розмірів елементів. Тільки спочатку слід потурбуватися про те, щоб фонове зображення повторювалося без стиків.
Додавання одночасно двох фонових зображень зазвичай продиктовано дизайном веб-сторінки. При цьому, як правило, один фон повторюється по горизонталі або вертикалі, а другий фон виводиться без всякого повторення. Втім, подібні деталі залежить цілком і повністю від волі дизайнера, тому розглянемо універсальну технологію додавання двох фонових картинок.
Фонові картинки досить активно використовуються для створення блоків, оскільки з їх допомогою формується самий химерний дизайн. Зокрема, можна додавати до елемента округлені куточки, декоративні вертикальні і горизонтальні лінії, а також багато іншого.