CSS. Урок 3 стилі тла background

Колір тла background-color

В багатьох елементах HTML можна встановити будь - який колір тла. Для цього достатньо застосувати стиль background-color:значення.

Приклад запису в css

background-color: LightGray;

Більш докладно про те, які бувають значення кольорів дізнайтеся у довіднику "Значення кольору в CSS"

.
файл file.css
h3 {
background-color:LightBlue;
}
p {
background-color:lightgray;
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h3> Заголовок - шаблон </h3>
<p> Шаблонний текст. Тут має бути основний текст статті </p>
</body>
</html>

Зображення тла background-image

background-image: url("файл зображення"); встановлює Фонове зображення.

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

Розглянемо приклад:

Припустимо, що ми підібрали для тла файл MIRAGEL.JPG, розміром 240 на 240px з таким зображенням.

файл file.css
body {
background-image: url("MIRAGEL.JPG");
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
</body>
</html>

В прикладі видно, що невеличке зображення розмножилося на всю сторінку (по вертикалі і по горизонталі). Файли зображень з невеликим розміром, ще називають текстурами. Колекції текстур можна придбати в інтернеті.

Керування розповсюдженням зображення фону. Властивість Background-repeat

За допомогою цієї Background-repeat можна змінити ситуацію за замовченням, коли текстура повторюється по всьому тлу.Іноді необхідно повторення текстури по-вертикалі, іноді по-горизонталі, а іноді необхідно, щоб текстура зовсім не розповсюджувалася. Для цього після background-image: url("файл - текстура") треба вставити background-repeat з необхідним значенням.

Background-repeat має такі значення:

background-repeat:no-repeat; Зображення не повторюється
background-repeat: repeat-x; Зображення повторюється по горизонталі
background-repeat: repeat-y; Зображення повторюється по вертикалі
background-repeat: repeat; Зображення повторюється по горизонталі і по вертикалі

Приклад фонового повторення по горизонталі текстури.

файл file.css
body {
background-image: url("decoration.png");
background-repeat: repeat-x;
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
</body>
</html>

Розмір тла

background-size:розмір_x розмір_y; Встановлює розмір тла у пікселях або відсотках. Особливо корисний стиль при використанні фонового зображення. Якщо не встановлювати, то тло розтягується/стискаєтся на розмір файла - зображення. Якщо встановити background-size:100%; тоді зображення буде завжди в межах вікна по горизонталі навіть при зміні розміру вікна

файл file.css
body {
background-image: url("bg2.jpg");
background-sie: 100%;
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
</body>
</html>

Виконайте перші 3 вправи за посиланням

Виконайте вправу в редакторі html

Зайдіть за посиланням стокові зображення та завантажте безкоштовне зображення для тла web сторінки.
Створіть новий html документ з обраним вами зображенням в якості тла.

Виконайте вправу в редакторі html

  1. Створіть новий документ index.html
  2. Завантажте та розархівуйте текстури
  3. Створіть новий файл зі стилями mycss.css та зв'яжіть його з файлом index.html
  4. У файлі mycss.css створіть стиль для тега body так, щоб тло сторінки заповнилося однією з обраних текстур.
  5. У файлі index.html свторіть заголовок H1 з текстом "Шаблон заголовка"
  6. У файлі mycss.css створіть стиль для тега H1 так, щоб заголовок був на фоні одного з таблиці кольорів