Responsive div box with background, overlay, and image

[LKinneyX23]

Nothing I have tried is working, and this is something where I cannot share specific info at this time, so I'm going to use pictures to show what I'm going for.

Computer:



Phone:


I've tried using an overlay for the text, but then there's no black background unless I set a height, but if I set a height, the overlay text goes outside of the box on a phone screen. If I don't set the height, then the parent box is too short on the computer.

The image also needs a height for the parent box in order to give it the bottom and right to 0 command, but then I have the text issues. If I float it, I can't get black around it as in the image, and it also appears at the top, not the bottom on a phone screen.

Hopefully someone can help! I've been pulling my hair out over this for three days!

I'm entirely self taught with coding. I proud of what I've been able to teach myself, but please feel free to talk down to me, I won't be at all offended. I would rather you did that than talked over my head. Thanks!

 

[Antero360]

Nothing I have tried is working, and this is something where I cannot share specific info at this time, so I'm going to use pictures to show what I'm going for.

Computer:

View attachment 2253

Phone:
View attachment 2254

I've tried using an overlay for the text, but then there's no black background unless I set a height, but if I set a height, the overlay text goes outside of the box on a phone screen. If I don't set the height, then the parent box is too short on the computer.

The image also needs a height for the parent box in order to give it the bottom and right to 0 command, but then I have the text issues. If I float it, I can't get black around it as in the image, and it also appears at the top, not the bottom on a phone screen.

Hopefully someone can help! I've been pulling my hair out over this for three days!

I'm entirely self taught with coding. I proud of what I've been able to teach myself, but please feel free to talk down to me, I won't be at all offended. I would rather you did that than talked over my head. Thanks!

Hey there,
Given your current info sharing restrictions, could you share a screenshot of what you have when you try the steps you mentioned above, and could you also include just enough code for the community to play around with and help provide you with the best solution?

 

[LKinneyX23]

This is the best I can do to show the error without showing stuff I cannot show:

Phone issue (the image is the first thing on the top there. There is text fully covering it all the way down - also not wanted)


Computer issue (image is on the right side):

Going for something like this (the subscribe box) but the image is on the right, not the left and the background for the image is just black, so I thought doing with code was better than a giant picture, but maybe I am wrong?

CSS:

#bottom {
position: absolute;
bottom: 0;
right: 0;
height: 100%;
}

.subscribe {
position: relative;
margin-right: auto;
margin-left: auto;
width:80%;
background-color: #000000;
}

.overlay {
position: absolute;
top: 40px;
margin-right: auto;
margin-left: auto;
padding-left: 60px;
width:60%;
height: 100%;
}

img.fluid3 {
border: none;
padding:0;
margin:0;
border:0;
float: right;
vertical-align: bottom;
max-width: 100%;
}

HTML #1:

<div class="subscribe">
    <img class="fluid3" src="images.jpg">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </li>
<li>aliquip ex ea commodo consequat. </li>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

HTML #2:

<div class="subscribe">
    <img class="fluid3" src="image.jpg">
    <div class="overlay">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </li>
<li>aliquip ex ea commodo consequat. </li>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div></div>

HTML #3

<div class="subscribe">
    <div id="bottom"><img class="fluid3" src="image.jpg"></div>
    <div class="overlay">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </li>
<li>aliquip ex ea commodo consequat. </li>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div></div>

 

[tomliv]

Adjust as needed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            position: relative;
            width: 80vw;
            height: 80vh;
            margin-inline: auto;
        }
        .copy{
            color: black;
            margin-block-end: 20px;
            inline-size: 100%;
        }
        .copy p{
            inline-size: 100%;
        }
        img{
            display: block;
            width: 100%;
            height: auto;
        }
        @media screen and (min-width: 48em){
            .content{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: flex-start;
                gap: 10%;
            }
            .copy{
                flex: 1 0 55%;
            }
            img{
                flex: 0 0 20%;
            }
        }
    </style>
    
</head>

<body>
    <div class="wrapper">
        <h1>Headline</h1>
        
        <div class="content">
            <div class="copy">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet massa et viverra euismod. Phasellus sit amet suscipit orci. Donec maximus at metus ut sagittis. Morbi id vulputate risus. Aliquam non tortor mi. Pellentesque dapibus lectus at lorem faucibus tincidunt. Nunc sit amet sagittis ante. Proin pharetra, justo eu rutrum tristique, urna libero sodales mauris, id venenatis nunc libero et velit. Nullam finibus risus quis mi aliquet luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin felis tellus, tincidunt sed accumsan ac, molestie eget tortor. Praesent mollis libero magna, in blandit felis malesuada vel.</p>

<p>Integer lectus dui, egestas sed laoreet eu, sagittis vitae risus. Cras vel tellus purus. Duis porta diam eget felis consectetur, sit amet commodo ipsum faucibus. Nunc maximus tincidunt erat, sed lacinia mauris luctus sit amet. Proin at justo dapibus, convallis ex eget, vehicula eros. Aliquam quis nisl pharetra magna hendrerit placerat. Cras at justo id turpis vulputate elementum. Sed eget diam massa. Fusce ac velit vel leo interdum vulputate eu in nibh. Donec fermentum faucibus ipsum sit amet vulputate. Quisque vitae aliquet quam. Duis facilisis efficitur gravida. Nullam pulvinar libero ligula, a sollicitudin urna convallis at. Fusce non erat in eros ornare vulputate a eu odio.</p>

<p>Nam non metus malesuada, luctus nunc quis, pharetra nisi. Nullam sagittis euismod ante. Pellentesque ut nunc augue. Donec ac justo ut est maximus rhoncus sit amet viverra ex. Suspendisse aliquet a velit varius tempus. Morbi nec arcu at purus dictum congue. Quisque magna ante, ultricies non tortor iaculis, iaculis auctor lorem. Vestibulum congue enim quis dolor vestibulum, in dignissim felis sagittis. Vestibulum id egestas ex. Donec tellus erat, facilisis sed viverra porttitor, porta ac diam. Curabitur scelerisque nulla at eleifend facilisis. Ut viverra mi tristique vulputate malesuada. Nunc gravida auctor pharetra. Proin eget placerat lacus.</p>
            </div>
            <img src="data:image/jpeg;base64,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ERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERF//9k=" alt="My Image" width="400" height="600">
        </div>
        
    </div>
</body>
</html>