Я хочу, чтобы заголовок h1 стоял поверх фонового изображения с цветом фона, который выглядит как поле для заголовка. Однако все изменения, которые я делаю в h1, остаются за фоновым изображением и отображаются только в течение миллисекунды, прежде чем фоновое изображение появляется поверх него. Как мне это исправить?
#all{
margin:0px;
padding:0px;
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 2000px;
background-image: url(../webtekodev/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
.row {
f display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: column;
}
.sag{
-ms-flex: 30%;
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.orta{
-ms-flex: 40%;
flex: 40%;
background-color: white;
padding: 20px;
}
.sol{
-ms-flex: 30%;
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title> this is the title</title>
<link rel="stylesheet" type="text/css" href="stiller.css">
</head>
<body>
//header
<div class="header">
<h1>jjjjjjjjjjj</h1>
<p> jjjjjjjjjjjjjjjj </p>
</div>
//navigasyon barı
<div id="all">
<div class="navbar">
<a href="anasayfa.html">Ana Sayfa</a>
<a href="birimlerimiz.html">Birimlerimiz</a>
<a href="hakkımızda.html">Hakkımızda</a>
<a href="iletişim.html">İletişim</a>
</div>
//containerlar
<div class="row">
<div class="sag">dsf</div>
<div class="orta">ddd</div>
<div class="sol"> wdwq </div>
</div></body>
</html>
Кроме того, столбцы div, которые я пытаюсь как-то построить, не остаются рядом, а вместо этого, друг под другом. Это работало до того, как я добавил фоновое изображение. Что я делаю не так?