На примере у нас будет секция в которой будет фон
Как сделать фон цветом
Сss свойство — background-color: Название цвета
Данное свойство добавляет фоновый цвет для элемента
У нас есть секция с классом bg, которую мы покрасим в синий цвет
Код Html
|
1 2 3 4 5 |
<section class="bg"> Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Буквоград пунктуация переписали дал ведущими которой силуэт переписывается бросил строчка то букв, безопасную использовало не вершину диких рыбного но выйти? </section> |
Код Css
|
1 2 3 |
.bg{ background-color: #48cae4; } |
Результат
Как сделать фон картинкой
Сss свойство — background-image: (‘Путь до изображения’)
Данное свойство добавляет изображение для элемента
Первое что нам нужно сделать это скачать из интернета нужное нам изображение и положить его к нашим файлам, мы его подключим ниже в файле style.css через свойство background-image
Код Html
|
1 2 3 4 5 |
<section class="bg"> Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Буквоград пунктуация переписали дал ведущими которой силуэт переписывается бросил строчка то букв, безопасную использовало не вершину диких рыбного но выйти? </section> |
Код Css
|
1 2 3 4 5 6 7 |
.bg{ background-image: url('ramka.png'); background-repeat: no-repeat; background-size: 600px; background-position: -50px -50px; height: 100vh; } |
Комментарии Css
background-repeat: no-repeat; — Чтобы изображение на странице не повторялось
background-size: 600px; — Размер фонового изображения в пикселях
background-position: -50px -50px; — Расположение изображения по горизонтали и вертикали
height: 100vh — Высота блока 100% относительно окна браузера
Результат
