Html - Overlaying an image on a text box and making it responsive

KenMcKown
August 30, 2024
71 views
1 vote
2 Answers

I want a single row (using divs) that has a gray text box with a transparent image overlaying the box. The gray box does not go all the way across the div, but the image does overlay part of it.

I want to achieve this with HTML and CSS.

I have attached a crude image of what I am trying to achieve. I also need this to be responsive in mobile where the text box fills the first row, and the image drops below the text box.

Any help would be greatly appreciated.

Desired Outcome

Here is a more detailed example of what I am trying to achieve using an image.

Updated Image

This was some generic code I came up with, but it did not work as intended.

    body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    position: relative;
    display: flex;
    align-items: center;
    height: 300px; /* Adjust height as needed */
}

.text-box {
    background-color: #ccc; /* Gray color */
    padding: 20px;
    width: 50%; /* Adjust width as needed */
    box-sizing: border-box;
    z-index: 1;
}

.image-overlay {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%; /* Adjust width as needed */
    height: 100%;
    overflow: hidden;
}

.image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text and Image Overlay</title>
</head>
<body>
    <div class="container">
        <div class="text-box">
            <p>Your text goes here. This box is gray and contains some content.</p>
        </div>
        <div class="image-overlay">
            <img src="https://picsum.photos/200/300" alt="Overlay Image">
        </div>
    </div>
</body>
</html>

Tags: css html

Answers

Here’s a way to do your layout using position:absolute. It’s not entirely clear what you are trying to do with your layout. I needed to create div’s e and f as fillers which is not the best way but you have the grey box basically going over and going under the red box.

div{
margin:0;
padding:0;
}

#a{
width:100%;
height:100vh;
background-color:white;
position:relative;
}


#b{
position:absolute;
width:80%;
height:35%;
background-color:white;
z-index:13;

}

#c{
position:absolute;

width:70%;
height:50%;
left:0;
top:35%;
background-color:grey;
color:white;
z-index:11;

}



#d{
position:absolute;
background-color:red;
height:100%;
width:40%;
right:0;
z-index:12;
}

#e{
position:absolute;
width:10%;
height:10%;
background-color:white;
z-index:12;
left:70%;
top:35%;
}


#f{
position:absolute;
width:10%;
height:10%;
background-color:grey;
z-index:15;
left:60%;
top:35%;
}

body{
margin:0;
padding:0;
}

<div id='a'>
  <div id = 'b'>
  </div>
  
  <div id = 'c'>
  </div>
  
  <div id='d'>
  </div>
  
  <div id='e'>
  </div>
  
  <div id='f'>
  </div>
</div>

Try the code below, which you can test here. For some reason when I make it into a runnable snippet, the text doesn’t flow around the shape-outside.

<!doctype html>
<html>
<head>
  <style>
  .d1 {
    background: silver;
    display: flex;
    flex-direction: column;
  }
  .d1 p {
    order: 1;
  }
  .d1 img {
    order: 2;
    width: 75%;
    align-self: center;
  }
  @media (min-width: 750px) {
    .d1 {
      display: block;
      width: 50%;
      margin: 0 auto;
    }
    .d1 p {
      padding: 1em;
    }
    .d1 img {
      float: right;
      width: 250px;
      shape-outside: url(https://donald.au/bugs/so-78914768-3.png);
      shape-margin: 1em;
    }
  }
  </style>
</head>
<body>
  <div class="d1">
    <img src="https://donald.au/bugs/so-78914768-3.png">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
  </div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Overlaying an image on a text box and making it responsive

Answers