I'm facing a challenge with my responsive image setup. The image is filling the top half of the screen as intended, but I can't seem to get the content underneath it to stay below the image as it resizes. Instead, the content ends up overlapping the image. I've tried various methods without success. Any suggestions or alternative approaches I could explore?
Here's the HTML structure:
</head>
<img src="/portfolio/images/me.jpg" class="ri">
<body>
<header>
<div class="contain">
<a href="/"><img src="/portfolio/images/logo.png" alt="Logo" width="200" height="200"></a>
</div>
</header>
<div class="contain">
<nav>
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/work">Work</a></li>
<li><a href="/details">Details</a></li>
</ul>
</nav>
</div>
And here's the relevant CSS:
.contain {
width: 980px;
margin: 0 auto;
}
img.ri {
position: absolute;
max-width: 100%;
min-width: 980px;
top: 0%;
left: 0%;
border-radius: 1px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
z-index: -200;
}
body {
.lift {
height: 80px;
}
header {