Хочу установить на задний фон очередного блока картинку, но она перекрывает содержимое блока. Пытался установить его с помощью background: url("")
в верхнем блоке, пытался установить его с использованием <img></img>
и position: relative
, пытался установить с использованием псевдоэлемента ::before
на верхнем блоке, background: url("")
и position: relative
. В любом случае фон выше всего остального. z-index
не помогает.
body {
margin: 0;
padding: 0;
font-family: Montserrat;
font-style: normal;
font-weight: 500;
}
a:active,
a:hover,
a {
text-decoration: none;
display: inline-block;
color: inherit;
}
.main_plans {
width: 100%;
}
.plans-container {
width: 1250px;
margin: auto;
position: relative;
z-index: 1;
}
.plans-title {
text-align: center;
font-weight: 700;
font-size: 42px;
line-height: 51px;
margin: 60px;
}
[class^="plan-option-container"] {
box-shadow: 20px 20px 40px rgb(5 12 51 / 5%);
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 80px 40px 50px 40px;
margin-right: 10px;
}
[class^="plan-option-container-"]:last-child {
margin-right: 0;
position: relative;
z-index: 1;
}
.plan-option-container-1, .plan-option-container-3 {
margin-top: 24px;
width: 390px;
height: fit-content;
}
.plan-option-container-2 {
width: 390px;
height: 634px;
}
.plans-content {
display: flex;
justify-content: center;
}
.plan-option-title-wrapper {
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 40px;
}
.plan-option-title {
margin: 0;
font-weight: 700;
font-size: 22px;
line-height: 27px;
color: #F14D34;
}
.plan-option-description-container-1, .plan-option-description-container-3 {
margin-bottom: 40px;
}
.plan-option-description-container-2 {
margin-bottom: 75px;
}
.plan-option-description-wrapper {
display: flex;
}
.plan-option-description-1, .plan-option-description-3 {
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #050C33;
opacity: 0.7;
}
.plan-option-description-2 {
font-size: 16px;
line-height: 22px;
color: #050C33;
opacity: 0.7;
}
.checkmark {
width: 13px;
height: 10px;
margin-right: 18px;
position: relative;
top:5px
}
[class^="plan-button-content-"] {
font-size: 12px;
line-height: 12px;
font-weight: 500;
text-transform: uppercase;
color: #f14d34;
text-decoration: none;
padding: 22px 20px;
width: 310px;
max-width: 100%;
text-align: center;
border: 2px solid #f14d34;
border-radius: 5px;
}
[class^="plan-button-content-"]:hover {
transition: background 300ms;
background-color: #f14d34;
color: white;
}
.plans-bottom-text {
font-size: 16px;
line-height: 22px;
text-align: center;
color: #050C33;
opacity: 0.5;
margin-top: 80px;
}
.plans-bottom-link {
font-size: 12px;
line-height: 12px;
letter-spacing: 0.06em;
text-decoration-line: underline;
text-transform: uppercase;
color: #050C33;
margin: 0 485px;
}
.plans-background-img {
width: 1113px;
height: 1124px;
z-index: -1;
position: relative;
bottom: 1168px;
left: 790px;
opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Project</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Ubuntu:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<main>
<div class="main_plans">
<div class="plans-container">
<h2 class="plans-title">Тарифы</h2>
<div class="plans-content">
<div class="plan-option-container-1">
<div class="plan-option-title-wrapper">
<p class="plan-option-title">Стартовый</p>
</div>
<div class="plan-option-description-container-1">
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-1">Консультации и работы по SEO</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-1">Услуги дизайнера</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-1">Неиспользованные<br>
оплаченные часы переносятся<br>
на следующий месяц</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-1">Предоплата от 6 000 рублей в<br>
месяц</p>
</div>
</div>
<div class="plan-button">
<a href="#" class="plan-button-content-1">ОСТАВИТЬ ЗАЯВКУ</a></div>
</div>
<div class="plan-option-container-2">
<div class="plan-option-title-wrapper">
<p class="plan-option-title">Бизнес</p>
</div>
<div class="plan-option-description-container-2">
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-2">Консультации и работы по SEO</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-2">Услуги дизайнера</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-2">Высокое время реакции – до 2<br>
рабочих дней</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-2">Неиспользованные<br>
оплаченные часы не<br>
переносятся</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-2">Предоплата от 30 000 рублей в<br>
месяц</p>
</div>
</div>
<div class="plan-button">
<a href="#" class="plan-button-content-2">ОСТАВИТЬ ЗАЯВКУ</a></div>
</div>
<div class="plan-option-container-3">
<div class="plan-option-title-wrapper">
<p class="plan-option-title">VIP</p>
</div>
<div class="plan-option-description-container-3">
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-3">Консультации и работы по SEO</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-3">Услуги дизайнера</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-3">Максимальное время реакции<br>
– в день обращения</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-3">Неиспользованные<br>
оплаченные часы не<br>
переносятся</p>
</div>
<div class="plan-option-description-wrapper">
<img src="img/Vector.svg" alt="checkmark" class="checkmark">
<p class="plan-option-description-3">Предоплата от 270 000 рублей<br>
в месяц</p>
</div>
</div>
<div class="plan-button">
<a href="#" class="plan-button-content-3">ОСТАВИТЬ ЗАЯВКУ</a></div>
</div>
</div>
<p class="plans-bottom-text">Вам не подходят наши тарифы? Оставьте заявку и мы<br>
предложим вам индивидуальные условия!</p>
<a href="#" class="plans-bottom-link">Получить индивидуальный тариф</a>
</div>
<img src="img/D-background.svg" alt="plans-background" class="plans-background-img">
</div>
</main>
</body>
</html>