Здравствуйте!
Занялся недавно версткой. Начал верстать сайт, сделал вроде бы всё как надо, но почему-то картинка не показывается через css backgroun-images, хотя если зайти через инспектор и открыть через него картинку по ссылке - она работает.
.first{
background-image: url('./images/back-first.png') no-repeat;
background-color: #F9F9F9;
width: 100%;
}
Так же столкнулся еще с проблемой, что при уменьшении экрана контейнер перестает работать. Код скину снизу. Буду очень признателен!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TOSTART</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Open+Sans:wght@400;700&family=Roboto:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="wrapper">
<div class="logo">
<span>TO</span>START
</div>
<div class="menu">
<a href="">Создание сайта</a>
<a href="">Продвижение бренда</a>
<a href="">Контакты</a>
</div>
<a href="" class="call">
<img src="images/call.png" alt="call">
<p>КОНСУЛЬТАЦИЯ</p>
</a>
</div>
</div>
</header>
<section class="first">
<div class="container">
<div class="bkg">
<h1 class="title">Комплексное создание и продвижение брендов с упором на <span>DIGITAL</span></h1>
<div class="offer">Поможем Вам сократить 95% затрат Вашего времени на бизнес. </div>
<div class="btn-title">
<a class="btn-title_form" href="#">Заказать консультацию</a>
</div>
</div>
</div>
</section>
</body>
</html>
html, body{
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
width: 100%;
}
header{
height: 61px;
background-color: #FFF;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
box-shadow: 0 0 30px rgba(0,0,0,0.09);
width: 100%;
}
.container{
width: 100%;
max-width: 1695px;
margin: 0 auto;
margin-left: 75px;
}
.wrapper{
display: flex;
}
.logo{
font-family: 'Roboto';
font-weight: bold;
font-size: 28px;
padding-top: 15px;
}
.logo span{
color: #00C2FF;
}
.menu{
margin-left: 25%;
width: 650px;
display: flex;
}
.menu a{
text-decoration: none;
padding-top: 20px;
color: #000;
margin-left: 10%;
white-space: nowrap;
}
.menu a:hover{
border-bottom: 2px solid #00C2FF;
transition: 0.1s;
}
.call{
display: flex;
font-family: 'Montserrat';
font-weight: bold;
width: 281px;
text-decoration: none;
color: black;
margin-left: 20%;
padding: 0px 22px;
background-color: #B3EDFF;
height: 61px;
}
.call img{
margin-left: 12px;
width: 25px;
height: 30px;
padding-top: 15px;
}
.call p{
padding-top: 2px;
font-size: 18px;
margin-left: 15px;
}
.call:hover{
background-color: #00C2FF;
transition: 0.3s;
}
.first{
background-image: url('./images/back-first.png') no-repeat;
background-color: #F9F9F9;
width: 100%;
}
.bkg{
padding-top: 75px;
}
.title{
margin-top: 210px;
font-size: 46px;
width: 1000px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.title span{
color: #00C2FF;
}
.offer{
margin-top: -20px;
font-size: 23px;
font-weight: 400;
}
.btn-title{
text-decoration: none;
padding-top: 50px;
width: 425px;
font-weight: bold;
font-size: 20px;
}
.btn-title_form{
background-color: #38DEA2;
border-radius: 100px;
padding: 15px 80px;
color: #fff;
text-decoration: none;
box-shadow: 0 0 10px #38DEA2;
}
.btn-title_form:hover{
box-shadow: 0 0 3px #38DEA2;
transition: 0.3s;
}
