Text over image continuing outside

Question

I would like to make a layout so that the text from the image continues outside the image. When I succeeded, the text reached another container. The output should look like this ideally responsive:

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body class="bg-dark">
  <div class="bg-primary">
    <p>Nec ornare ante eget convallis vitae Curabitur in cursus nunc tincidunt. Tristique platea massa nibh Phasellus.</p>
    <p>Nec ornare ante eget convallis vitae Curabitur in cursus nunc tincidunt. Tristique platea massa nibh Phasellus.</p>
  </div>

  <div class="card">
    <img class="card-img" src="https://via.placeholder.com/2200x1000?text=2200+x+1000" alt="Aktuality" />
    <div class="card-img-overlay d-flex pb-0">
      <div class="mt-auto w-75">
        <div class="card">
          <h3 class="card-text font-weight-bold">Text</h3>
          <p>Lorem ipsum dolor sit amet consectetuer aliquet Vivamus eleifend lobortis dolor. Pretium metus elit id elit.</p>
          <p>Nec ornare ante eget convallis vitae Curabitur in cursus nunc tincidunt. Tristique platea massa nibh Phasellus.</p>
          <p>Nec ornare ante eget convallis vitae Curabitur in cursus nunc tincidunt. Tristique platea massa nibh Phasellus.</p>

        </div>
      </div>
    </div>
  </div>

  <div class="bg-primary">
    <p>Nec ornare ante eget convallis vitae Curabitur in cursus nunc tincidunt. Tristique platea massa nibh Phasellus.</p>
    <p>Nec ornare ante eget convallis vitae Curabitur in cursus nunc tincidunt. Tristique platea massa nibh Phasellus.</p>
  </div>

</body>

</html>

Does this answer your question? [How to get Floating DIVs inside fixed-width DIV to continue horizontally?](https://stackoverflow.com/questions/1015809/how-to-get-floating-divs-inside-fixed-width-div-to-continue-horizontally) — bad_coder, Aug 06 '20 at 01:07

score 0 · Accepted Answer · answered Aug 05 '20 at 18:27

In the end, I solved it this way:

.main-header {
  position: relative;
  display: table;
  width: 100%;
  height: 70vh;
  margin-bottom: 5rem;
  text-align: center;
  background-size: cover;
  overflow: hidden;
  background-image: url('https://via.placeholder.com/2200x1000?text=2200+x+1000')
}

.content {
  width: 85%;
  margin: 0px auto;
  background: #fff;
  padding: 10px 0px;
  margin-top: -150px;
  position: relative;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

<div>Lorem ipsum</div>
<br><br>
<header class="main-header " style="">
</header>
<main id="content" class="content" role="main">
  dfgdfgdfg<br> dfgdfgdfg
  <br> dfgdfgdfg
  <br> dfgdfgdfg
  <br> dfgdfgdfg
  <br> dfgdfgdfg
  <br> dfgdfgdfg
  <br> dfgdfgdfg
  <br>
</main>
 <br><br>
<div>Lorem ipsum</div>

Text over image continuing outside

1 Answers1