Here is the design I am aiming for
Hey there! This is my first time posting here :)
I am currently stuck and have been struggling for hours.. haha
I am trying to place an image beneath some text inside a div, which should overflow down the page. Unfortunately, the image is running under my footer instead of pushing it down. I have tried using position:relative on the div & position:absolute on the footer but I can't seem to make it work!
I have included my code below. Although the image is random, it is similar in size to the one I am using locally.
Any assistance would be greatly appreciated
/* My Work page */
.wallpaper {
margin: 0px;
height: 800px;
background-color: var(--peach);
position: relative;
}
.my-work-text {
/* position: absolute; */
/* top: 30%; */
/* left: 50%; */
/* transform: translate(-50%, -100%); */
color: var(--black);
font-family: "playfair display";
max-width: 60%;
margin: auto;
padding-top: 20%;
}
.my-work-screenshot {
margin: auto;
}
/* FOOTER */
footer {
/* margin-top: 100px; */
color: #fff;
background-color: var(--black);
text-align: center;
padding: 40px;
position: absolute;
width: 100%;
}
footer>h5 {
padding: 8px;
}
footer>p {
line-height: 0.4rem;
}
footer>hr {
margin: 30px 0 20px 0;
}
footer>ul {
list-style: none;
}
footer>ul>li>a,
a:link,
a:hover,
a:visited {
text-decoration: none;
color: var(--white);
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d56485648551a1d0c1949">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- MAIN TEXT & BG -->
<section>
<div class="wallpaper">
<div class="container">
<div class="my-work-text">
<h2>Bryan Johnston Cichlids</h2>
<p>Bryan is a specialist aquarium fish seller and was looking for site to showcase his business. I provided Bryan with a complete service from design, functionality & development</p>
</div>
<div class="my-work-screenshot container">
<img src="https://www.xda-developers.com/files/2018/04/longshot-example.png" class="img-fluid shadow" alt="Responsive image">
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<h5>BLOXY WEB DESIGN & DEVELOPMENT</h5>
<p>Professional website designer and developer</p>
<p>Tel: 07806 615231</p>
<p>Email:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4132353420333501322b232d2e3929202c6f222e6f342a">[email protected]</a></p>
<hr />
<ul .footer-links>
<li><a href="#">Home</a></li>
<li><a href="#">My work</a></li>
<li><a href="#">Get in touch</a></li>
</ul>
<p>© Copyright Bloxy Web Design & Development</p>
</footer>