Issue with images and text overlapping in HTML using Bootstrap

I'm encountering an issue with HTML. I need to overlap two lines of text with an image on my website. I'm using bootstrap4 and working within a template where the code works perfectly:

<section class="position-relative dark-overlay py-3 py-lg-7 overflow-hidden" data-parallax="scroll" data-image-src="img/photo/erii-gutierrez-487083-unsplash.jpg" data-speed="0.3" data-position-x="right">
      <div class="container overlay-content hero hero-page">
        <ul class="breadcrumb justify-content-center no-border mb-0">
          <li class="breadcrumb-item"><a class="text-white" href="index.html">Home</a></li>
          <li class="breadcrumb-item text-white active">Ladies</li>
        </ul>
        <div class="hero-content pb-5 text-center text-white">
          <h1 class="hero-heading">Ladies</h1><p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
        </div>
      </div>
    </section>

However, when I try to replicate this format in another section of my site, it doesn't seem to work as expected:

<section class="dark-overlay overflow-hidden" data-parallax="scroll" style="width:100%">
   <div class="position-relative container overlay-content hero hero-page">
            <img src="img/fotos/cava720.gif" width="100%">

     <div class="hero-content text-center text-white">
       <h1 class="hero-heading">Title</h1><p class="lead">subtitle</p>
     </div>
   </div>
</section>

Can anyone shed light on what might be causing this discrepancy?

It seems like there might be some JavaScript involved in the template that I don't fully comprehend...

Appreciate any help!

javascripthtmlcssbootstrap-4

Answer №1

If you want text to overlay an image, one solution is to place the text inside a div element and set the image as the background for that div.

Below is an example of the CSS and HTML code to achieve this effect:

.container{
  background-image: url("https://example.com/image.jpg");
}
<div class="container">
  <div class="hero-content text-center text-white">
    <h1 class="hero-heading">Title</h1>
    <p class="lead">Subtitle</p>
  </div>
</div>

You can view a live example on CodePen here

For more information on customizing the background property, check out this link

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

The response header does not contain a valid JWT token

Here's a function I've implemented to authenticate users by creating a response header: function verifyUser(res, id) { const payload = { id } const token = jwt.sign(payload, config.JWT_KEY, { expiresIn: '24h' ...

javascriptnode.jsexpressjwt

Ensure YouTube iframe remains visible above all other elements on mobile devices at all times

Currently, my method involves utilizing YouTube for embedding videos and incorporating certain elements that should display on top of the video when clicked on. Regrettably, this functionality operates flawlessly on desktop browsers but encounters issues ...

htmlflashyoutubehtml5-video

What steps should I take to display a Modal upon a successful Oauth2 redirect?

I am currently working on an older web application that utilizes the portal/portlet architecture. Within the application, I have a feature that loads in a modal when accessed. The modal includes navigation functionality that allows customers to navigate t ...

javascriptauthenticationoauth-2.0modal-dialoghttp-redirect

The header in the fetch() function is displaying as application/x-www-form-urlencoded rather than the expected application/json

Update #2: The issue has been resolved, you can find the solution in my own answer (which I am unable to accept at this time). I have a React application running on Heroku with a node.js backend via Express. In the frontend, I am attempting to send a POST ...

javascriptjsonnode.jsherokufetch-api

We encountered an issue: Headers cannot be set after they have been sent while attempting to read files

I encountered an error when attempting to read a file and send the response back to the browser. [ 'Error: Can\'t set headers after they are sent.', ' at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:344:11)&apo ...

javascriptnode.jsexpressfs

Make TR element vanish when an Ajax call is made

I have implemented bootbox to generate a modal window with the following code: $("a.delete").on("click", function() { var id = $(this).attr('id').replace('item_', ''); var parent = $(this).parent().parent(); var t ...

javascriptjquerybootbox

Is it possible to arrange data at the server without using a query?

Having some trouble with sorting my array before printing it in handlebars. My app is built using expressjs, handlebars, mongoose/mongodb and I can't seem to figure out the best approach. app.js (entry point) var debug = require('debug'); ...

javascriptnode.jsexpressmongoose

Searching for a file in Mongoose using an array field of IDs

I am working on a system with two models, Trade and Work, that serve as categories and subcategories of labor. I am trying to implement a feature where new additions automatically select a Trade based on the given Work. However, I am facing challenges in f ...

javascriptnode.jsmongodbmongoose

Using Mongoose to delete a document based on the condition of a subdocument value

I'm attempting to delete a document from the "challenges" collection, but only when the user is listed as a participant with the admin role for that challenge. Although my current code logs challenge deleted, the challenge is not actually being remov ...

javascriptnode.jsmongodbmongoose

Submitting Forms Using Jquery Lightbox Technology

I've encountered a problem with a form that allows users to enter information and submit it to a PHP script for database storage. However, not all of the data is being sent. Here is the code snippet: $(document).on("click", ".save_new_user", functio ...

jqueryhtmlajax

Concealing an item in an Angular Ionic repeater

I am creating a customizable list control where users can filter through different data levels. This list control consists of 4 hierarchical levels with numerous items. Initially, only the first level item is displayed. Upon clicking on the first level, th ...

javascriptangularjsionic-framework

How can I maintain text alignment when it wraps around a floated element?

Currently, I am working on a responsive website project. In the example code provided, I have set the width of the container div to a fixed value to highlight a specific issue. The problem arises when the text wraps onto multiple lines and extends beyond ...

htmlcss

Storing data locally in Cypress using local storage

To streamline the login process for one of our applications, I am looking to implement local storage settings instead of going through the regular login page. I have a function set up that can retrieve the necessary accessToken when running in node. asyn ...

javascriptnode.jscypress

Modify the HTML content within a span element upon clicking while toggling the slide

I want to create a feature where the contents of a ul are displayed when a heading is clicked, along with changing the icon next to the heading. By default, the icon is a down arrow. When clicked, the ul should slide open and the icon should change to an u ...

javascriptjqueryslidetoggle

What is the best way to adjust column width in an HTML table using Bootstrap 4 and HTML helpers?

I've created a simple table with two columns and an additional button in the body's td elements: <table class="table table-hover"> <thead class="table-info"> <tr> <th class="text-center"> ...

htmlcssasp.net-corehtml-tablebootstrap-4

XML integration with Jplayer is not functioning properly

I'm in the process of setting up Jplayer to work with an XML document so that my client can easily update the playlist. I managed to get it working flawlessly when I manually coded the songs into the JS. Here's my current code: <div class="bo ...

javascripthtmlxmljplayer

Achieving full-width ordering in CSS

Is it feasible to have a child div with 100% width? This is an example of HTML: <div class="main"> <div class="order2">order2</div> <div class="order1">order1</div> </div> Here is the CSS code: .main{ dis ...

css

After making a POST request, I must ensure that the page is rendered accordingly

How can I efficiently handle requests to the server and update the page without reloading it, following SPA principles using useEffect()? I attempted to implement something like this: useEffect (() => { addProduct (); }) but it proved to be ineffectiv ...

javascriptnode.jsreactjs

Changing the direction of input text from right to left: A step-by-step guide

Is there a way to reverse text in HTML? For example, if I input "apple" can it be automatically changed to "elppa"? I have attempted some solutions but they only affect the text direction! https://i.sstatic.net/ce2Fv.jpg ...

javascripthtmlcss

Manipulating a selected option using JavaScript

///////////////////////////////////////////////////////////////////////////// Below is the code I've written, and when I click the button to display the output from the function, nothing appears. Sample HTML Code <!DOCTYPE html> <html> ...

javascripthtml