@Dolerum

Почему в css не работает background-image?

Здравствуйте.
Почему-то не вставляется фоновое изображение через background в css. Чего я только не перепробывал. И кавычки и просто background, но изображение так и не отображается.
В чем проблема?
Класс .top-slide

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML</title>
	<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
	<link rel="stylesheet" href="css/css.css">
	<script src="script.js"></script>
</head>
<body>

	<header>
		<div class="header-container">
		<div class="logo">
			<img src="img/LOGO.png" alt="logo">
		</div>
		<input type="chechkbox" id="menu-checkbox">
		<nav role="navigation">
		    <label for="chechkbox" class="toggle-button"
		   data-open="menu" data-close="close" onclick></label>
		</nav>
		   <ul class="main-menu">
		    <li><a href="#">HOME</a></li>
		    <li><a href="#">PORTFOLIO</a></li>
		    <li><a href="#">BLOG</a></li>
		    <li><a href="#">ABOUT US</a></li>
		    <li><a href="#">CONTACT</a></li>
		   </ul>
		</nav>
		</div>
	</header>
	<main>
		<section class="top-slide">
		<div class="top-container">
		<div><h2>we belive</h2></div>
		<div><h2>in quality design</h2></div>
		<div><p>ANY CREATIVE PROJECT IS UNIQUE</p></div>
		<div><p>AND SHOULDER IMPROVIDED WITH</p></div>
		<div><p>THE APPROPRIATE QUALITY</p></div>
	</div>
	    </section>
		</main>





	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>	
</body>
</html>


body {
	font-family: 'Poppins', sans-serif;
}

*{
	padding: 0;
	margin:0;
}

li {
	list-style: none;
	display: flex;
}

a {
	text-decoration: none;
}

header {
	background: #f6f6f6;
	padding: 22px 0;
}

.header-container {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.header-container a {
    color: #000;
    font-size: 16px;
    padding: 27px 6px;
    margin-right: 32px;
}

.header-container a:hover {
	background: #ffeb00;
}

#menu-checkbox {
	display: none;
}

ul {
	display: flex;

}

nav {
	margin-top: 20px;
	text-transform: uppercase;
}


.top-slide {
	padding-top: 120px;
	background-image: url("..img/slider.jpg");
}

.top-container {
	width: 85%
	margin: 0 auto;
}

h2 {
	text-transform: uppercase;
}


.top-slide h2 {
	background-color: #ffeb00;
	display: inline;
	font-size: 50px;
}

.top-slide:nth-child(2) {
	margin-bottom: 10px;
}

.top-slide p {
	background-color: #3f3f44;
	color: #ffffff;
	display: inline;
	font-size: 18px;
}








@media screen and (max-width: 420px) {
	.header-container {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	.main-menu {
		display: none;
	}
	.main-menu li {
		width: 100%;
		display: block;
		font-size: 12px;
	}
	.main-menu a {
		display: block;
		padding: 8px;
	}
	.toggle-button {
		text-align: center;
		display: block;
		cursor: pointer;
		color: #000;
	}
	.toggle-button:after {
		content: attr(data-open);
		display: block;
	}
	#menu-checkbox:checked + nav[role="navigation"] .main-menu{
	display: block; 
	}
	#menu-checkbox:checked + nav[role="navigation"] .toggle-button:after{
		content: attr(data-close)
	}

	.header-container a {
		margin-right: -65px;
	}
	.main-menu {
		position: relative;
		top: 30px;
		right: 115px;
	}
}
  • Вопрос задан
  • 6858 просмотров
Решения вопроса 1
@Bondi
.top-slide {
padding-top: 120px;
background-image: url("..img/slider.jpg");
}


а картинки лежат в папке img? а сама папка img лежит на одном уровне с index.html? Если да, то удалите лишнюю точку и допишите знак "/" вначале пути background-image: url("./img/slider.jpg"); или удалите точки перед img: background-image: url("img/slider.jpg");
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Попробывайте указать правильный путь. Полагаю, должно быть примерно так: "../img/slider.jpg"
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы