I have a webpage with a header and content section. I styled the header to a gradient and to be in a trapezoid shape. I want to have an image (leaf.png) be in the middle of these two divs while floating in front of them. However, my header overrides the image for some reason. Here is a picture of what I want to have: link But this is what happens instead: link I don't know what is happening or how to fix it. Here is my code right now:
<!doctype html>
<html>
<head>
<title>Document</title>
<style>
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(blue, black);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
}
header h1 {
position: relative;
color: white;
}
</style>
</head>
<body>
<header>
<img src="leaf.png" style="float:right" />
<div class="header__bg"></div>
<h1>Header Content</h1>
<img src="leaf.png" style="float:right" />
</header>
<section>
<h1>Section Content</h1>
</section>
</div>
</body>
</html>
Please help. Thanks.
Aucun commentaire:
Enregistrer un commentaire