I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. How can I solve this issue?
#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>
//navigation 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>
//containers
<div class="row">
<div class="sag">dsf</div>
<div class="orta">ddd</div>
<div class="sol"> wdwq </div>
</div></body>
</html>Additionally, the columns within the div are not staying next to each other as intended, but instead, appearing below one another. This was working correctly before I added the background image. What could be causing this issue?