Здравствуйте.
Почему-то не вставляется фоновое изображение через 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;
}
}
Простой
