Використання CSS для встановлення фонового зображення

• Може 13, 2024

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

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

корпус {
background-image: url ("image.gif");
}

Це все, що вам потрібно зробити, щоб розмістити фонове зображення для вашої веб-сторінки. Звичайно, ви, мабуть, захочете налаштувати, як відображається зображення. Скажімо, ви хочете, щоб ваше зображення починалося вгорі сторінки, але було по центру горизонтально, а не вирівняно ліворуч (вирівнювання за замовчуванням). У цьому випадку вам потрібно додати властивість 'background-position' до свого правила CSS:

корпус {
background-image: url ("image.gif");
фон-положення: центральний верх;
}

Визначаючи властивість "фон-позиція", перше значення встановлює горизонтальне вирівнювання (ліворуч, центр або праворуч), а друге встановлює вертикальне вирівнювання зображення (вгорі, в центрі або внизу).

Далі ви вирішите, що хочете зупинити зображення від наклеювання (повторення) горизонтально, хоча ви хочете, щоб воно плитку було вертикально. Настав час викласти властивість 'background-повторити':

корпус {
background-image: url ("image.gif");
фон-положення: центральний верх;
тло-повторення: повтор-у;
}

Встановлення значення "повторити-у" вказує браузеру нанести плиткове фонове зображення по осі y, також по вертикалі, але не по осі x (по горизонталі), саме цього ми хотіли. Якщо ви хотіли викласти плитку горизонтально, але не вертикально, замість цього скористаєтесь значенням "повторити-х"; якщо ви взагалі не хотіли, щоб зображення було плитковим, дайте йому значення "не повторювати". Значенням за замовчуванням є плитка зображення в горизонтальному та вертикальному напрямку, тому, якщо це найкращий вибір для вашого зображення, вам взагалі не потрібно встановлювати властивість 'background-repeat'.

Нарешті, ви можете ознайомитись із властивістю "background-attachment". За замовчуванням ваше зображення буде прокручуватися у міру прокручування сторінки, тому якщо ви не повторюєте зображення вертикально і у вас довга сторінка, ваше зображення не поширюватиметься внизу сторінки. Ви можете змінити це, встановивши для властивості "background-attachment" значення "fix", завдяки чому фонове зображення залишається на тому ж місці на моніторі незалежно від того, як прокручується сторінка. Тепер правила вашого фонового зображення будуть виглядати приблизно так:

корпус {
background-image: url ("image.gif");
фон-положення: центральний верх;
тло-повторення: повтор-у;
фон-вкладення: фіксований;
}


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

фон {
url ("image.gif") повторити-y фіксовану центральну верхівку;
}

Використовуючи властивість "background", ви повинні перераховувати значення у визначеному порядку:
[фон-колір (якщо використовується)] [фон-зображення] [фон-повтор] [фон-вкладення] [фон-положення]. Ви можете залишити будь-яке значення, яке вам не потрібно, вам просто потрібно перерахувати всі значення, які ви використовуєте в належному порядку, або правило не працює.

Відео Інструкція: Изучение CSS/CSS3 | #6 - Как указать задний фон картинкой CSS (Може 2024).