Почему не работает background-image и контейнер перестает работать при уменьшении экрана?

Здравствуйте!
Занялся недавно версткой. Начал верстать сайт, сделал вроде бы всё как надо, но почему-то картинка не показывается через 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;
}
  • Вопрос задан
  • 926 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Замените background-image на background:

.first{
  background: url('./images/back-first.png') no-repeat;
  background-color: #F9F9F9;
  width: 100%;
}


Или выносите дополнительные параметры для бекграунда в отдельные свойства если хотите использовать именно background-image:

.first{
background-image: url('./images/back-first.png');
background-repeat: no-repeat;
background-color: #F9F9F9;
width: 100%;
}


Это происходит потому что background-image принимает в качестве параметра только ссылку на изображение, и в случае если внутри будет содержаться нечто в стиле no-repeat или cover и так далее - это будет считаться ошибкой.

Так же столкнулся еще с проблемой, что при уменьшении экрана контейнер перестает работать.


Всё работает. Единственное что смогу сказать, вёрстку нужно исправлять, чтобы довести её до нормального состояния. Тогда точно никаких ошибок и проблем не будет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 июл. 2020, в 14:03
3000 руб./за проект
03 июл. 2020, в 13:49
25000 руб./за проект
03 июл. 2020, в 13:27
30000 руб./за проект