Здравствуйте! Помогите, пожалуйста, разобраться с фоновым рисунком для секции и шрифтами.
Код в css и html, а также этот же код здесь
https://jsfiddle.net/z01bcfje/. Могу сюда продублировать, если нужно, будет в оффтопе.
Фоновый рисунок (1920x1280) для секции не подгружается (а другие картинки подгружаются), к сожалению. Причем независимо от того - где лежит картинка - в папке, а работает или если ссылка ведет на хостинг для хранения фото. Другие картинки получается организовать, а вот фоновый рисунок - нет.
Я хочу научиться помещать картинку в отдельные боксы как фон для бокса, а также в флекс-контейнеры как фон для контейнера.
Также не очень понимаю - как в флекс-боксах настраивать стили для шрифтов, они почему-то не меняются совсем никак, даже цвет.
(Оффтоп)
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Структура</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="row align-items-center justify-content-center">
<div class="my-flex-container-3">
<div class="box-1">
<h2>Box 1</h2>
<p> Может когда-нибудь у меня получится разобраться в html и css
</p>
</div>
<div class="box-2">
</div>
</div>
<div class="my-flex-container-4">
<div class="box">
<h2>Box 1</h2>
<p> Проверяем блоки 2</p>
</div>
<div class="box">
<h2>Box 2</h2>
<p> Проверяем блоки 2</p>
</div>
</div>
</div>
<div class="flex-container">
<div class="my-flex-container-2"> <!-- ПОИСКОВИКИ -->
<p>
<a href="https://yandex.ru"><img src="img/иконка_whatsapp.png" alt="" style="width: 50px" ></a>
<a href="https://yandex.ru"><img src="img/vk.png" alt="" style="width: 50px" ></a>
<a href="https://yandex.ru"><img src="img/fb.png" alt="" style="width: 50px" ></a>
<a href="https://yandex.ru"><img src="img/tg.png" alt="" style="width: 50px" ></a>
</p>
</div>
</div>
</body>
</html>
Код:
body {
padding: 0;
margin: 0;
color: #222222;
height: 740px;
font-size: ;
background: url(hps://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover;
}
.flex-container {
flex-direction: row;
margin-top: 10px;
}
.my-flex-container-2 {
display: flex;
color: rgb(0, 6, 255); /* темный ультрамалиновый, фиолетовый*/
margin-bottom: 30px;
flex-direction:row;
justify-content: center;
align-items:center;
}
.my-flex-container-3{
display: flex;
align-items: center;
/* background-image: url(https://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover; */
background-repeat:no-repeat;
background-position: center 64px;
width: 1366px;
height:990px;
padding:16px;
margin:0 auto;
}
.my-flex-container-4{
display: flex;
align-items: center;
}
.my-flex-container-3, .my-flex-container-4 div{
padding: 10px; border: 2px solid silver;
background-image: url(img/stok.jpg) no-repeat center top / cover;
}
.box-1{
flex: 1;
border: 3px solid red;
}
.box-2{
flex: 2;
border: 3px solid green;
background: url(https://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover;
}
.box{
background-image: url(hps://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg)
}
.box-1 {
font color: white;
}
.H2 {color: white; /* синий цвет */}
