The words overlaid on the image spill out beyond its edges

I want to create a design where the text flows outside of the image and continues into another container. After some trial and error, I managed to achieve a layout where the text seamlessly extends beyond the image and into a separate section. Ideally, the final output should be responsive and look something like this: https://i.sstatic.net/UXoPU.jpg

<!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>

htmlcssbootstrap-4

Answer №1

Finally, I managed to crack it using this method:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we parse the returned 'data' as HTML in JavaScript/jQuery to select more elements?

After receiving data from a webservice, it turns out that the data is just raw HTML without any XML headers or tags around it, but simply a piece of HTML code. <div class="Workorders"> <div id="woo_9142" class="Workorder"> <span ...

javascriptjqueryhtmlajax

Modify the color of the background for a flex-wrap list

I am facing a situation where I have a list with an unknown number of items, but I need to control the height of its container. To achieve this, I am using flex-flow: wrap column to split the list. The list starts off hidden and is displayed using jQuery&a ...

cssflexbox

Troubles arise when hovering over the <strong> tag and the <h4> element

While hovering over my h4 tag in the table, everything functions correctly. However, when I hover over the strong tag inside the h4 element, the strong tag inherits the same hover effect as the h4 tag. The structure of each td element within the table is ...

htmlcsshover

What is the best way to adjust the vertical margin in a vis.js timeline?

The vis.js timeline sets a margin of 5px in each row using inline styles that are controlled programmatically by the library. The height, top position, and transform of each item within the row are specified by the library as well. Attempting to manually ...

javascriptcsstimelinevis.js

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Is it possible to create a link/button that triggers an AJAX/jQuery function to load new content, while still providing a link to the same content on a separate page? I am particularly concerned about SEO and how search engine crawlers will index my sitem ...

jqueryhtmlajaxseohref

How to retrieve the value from an editable td within a table using Jquery

I am working with a dynamic table that looks like this: <table> <tbody> <tr> <td>1</td> <td contenteditable='true'>Value1</td> </tr> <tr> ...

javascriptjqueryhtmlhtml-table

Tips on creating Twitter Bootstrap tooltips with multiple lines:

I have been using the function below to generate text for Bootstrap's tooltip plugin. Why is it that multiline tooltips only work with <br> and not \n? I would prefer to avoid having any HTML in my links' title attributes. Current Sol ...

javascripthtmlcsstwitter-bootstrap

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

I am attempting to replace all the text inside a DIV, including within its children, without modifying any HTML tags. Specifically, I want to switch all instances of 'Hello' to 'Hi'. Thank you for your help. var changes = $('div ...

javascriptjqueryhtmlreplace

Scrolling to ID or Anchor using jQuery: Automatically scrolls to the top if already at the designated section

I've been on a quest to uncover the cause and solution for this issue. Lately, I've been utilizing $("#content").animate({scrollTop:$(#elementId).offset().top-183}, 600); to achieve smooth scrolling to an ID within a <div>. The number 18 ...

javascriptjqueryhtmlcssscroll

Switch up div containers with JavaScript based on the set array order of elements?

As I work on creating a list that calculates the sum of selected numbers, I encountered an issue with rearranging the items. Despite successful functionalities like adding images with names, changing languages, and performing calculations, the page keeps r ...

javascripthtml

Executing Selenium test cases based on HTML tag is a key aspect of automated testing

I need to run my selenium test scenarios based on the value of an HTML tag, for example: <meta name="survey name" content="ABC Car"> The content represents different event types, with a total of 4 possible event types. ...

htmlseleniumselenium-webdriver

`Loading CSS and JS files in node.js: A step-by-step guide`

I've searched through numerous similar questions without success, so I'm reaching out for help. My folder structure looks like this: Source Code Frontend Graphs.html Graphs.css Temperature.js Server_Backend server.js I aim ...

javascripthtmlnode.jsexpress

Issue with Bootstrap 4.3.1 - unable to turn off validation icons

I have come across answers on Stack Overflow about disabling Bootstrap validation icons. There are two suggested solutions: $enable-validation-icons: false; (this is also recommended in Bootstrap's theming documentation) Utilize SCSS/CSS to eliminat ...

angularsassbootstrap-4

Adjust the size at the location of the cursor

I am having trouble understanding how to implement zoom based on mouse position using this example here: (https://stackblitz.com/edit/js-fxnmkm?file=index.js) let node, scale = 1, posX = 0, posY = 0, node = document.querySelector('.f ...

javascripthtmlcanvashtml5-canvas

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

javascripthtmlcss

What is the process for choosing the 1st, 4th, 7th element, and beyond?

Is there a way to choose the 1st, 4th, 7th elements and so on? Also, how can I select the 3rd, 6th, 9th, and beyond? The method involves selecting an element then skipping two before selecting the third one. I believe the :nth-child selector is the key bu ...

csscss-selectors

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

javascriptphpjqueryhtmljson

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

javascriptjqueryhtmlcssflexbox

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

javacssvaadinstyling

Image in an Outlook email surrounded by padding and enclosed in a paragraph

I am facing an issue with my email signature setup in Outlook Live where there is a white space below the image. After trying to add vertical-align:bottom to the CSS, it seems that Outlook Live does not accept it. The code for my HTML in Outlook 20xx is a ...

htmlcssoutlook