Як додати колір фону і зображення в css - web development, qndex

Як додати Колір фону і Зображення в CSS

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

По кроках, додавання Кольори фону і зображення в CSS.

1. Перш за все, створіть HTML-файл. Ви можете використовувати будь-який IDE, наприклад блокнот або Notepad ++ або Adobe Dreamweaver, щоб створити HTML-файл. У цьому уроці ми, використовуючи звичайний блокнот, який доступний на будь-якому ПК з Windows. Відкрийте блокнот і введіть наступний код:

2. Далі, в тій же директорії (папці) де знаходиться наш html файл, створіть папку з ім'ям "css" і створіть в ній новий CSS-файл з ім'ям "style.css".

3. Далі відкриваємо файл style.css і вводимо в нього наступний код:

4. Ще раз, щоб додати фонове зображення, спочатку збережіть зображення в тій же папці, де знаходиться ваш HTML-файл і потім відкрийте файл CSS, який ви створили в кроці-2.

5. Введіть наступний код в той же файл CSS, т. Е. Style.css

визначає, як фонове зображення повинно повторюватися. За замовчуванням, фонове зображення, якщо розмір маленький, то воно буде повторюватися на всю сторінку по (обидві осі X і осі Y) але якщо ви хочете контролювати, по якій осі буде повторюватися зображення або взагалі що-б зображення не повторювалося нижче розглянуті всі способи background-repeat.

Є чотири можливих значення для background-repeat.

background-repeat: repeat-x - це змушує повторювати водяний знак лише по горизонталі.
background-repeat: repeat-y - цього змушує повторювати водяний знак лише по вертикалі.
background-repeat: repeat це робить повтор фонового зображення по горизонталі і вертикалі. Це поведінка за умовчанням.
background-repeat: no-repeat - це не повторювати зображення. Буде відображено лише одне фонове зображення.

background-attachment використовується, щоб зробити фонове зображення фіксованим або буде прокручуватися разом з усією сторінкою Контенту.

Існує два значення для background-attachment:
background-attachment: scroll - це змусить фонове зображення прокручуватися разом з вмістом сторінки.
background-attachment: fixed - це буде блокування фонового зображення.