Having Trouble with Text Overlay on Image

I am facing an issue with placing text over an image on my website. No matter what I try, the text always ends up below the image and I can't seem to bring it up.

Here is a snippet of my code:

.Happylady {
  position: relative; 
  width: 100%;
}
.Happylady p {
  float: left;
  position: absolute; 
  left: 0; 
  top: 80px;
  width: 100%; 
}
<div class="Bannerimage">
  <img src="content/severroom.png" class="centerimage" />
  <p>Check out speeds up to 60Mbps!</p>
  <a href="/cable/"><button >View Packages!</button></a>
</div>
<div class="Internet">
  <div class="Information">
    <h3>INTERNET</h3>
    <h7>CABLE, DSL & RURAL WIRELESS</h7>
  </div    
  <div class="HappyLady">
      <img src="content/happylaptoplady.png" alt="" />
      <div class="contents">
          <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
          <div class="Benefits">
              <p>UNLIMITED PLANS AVAILABLE</p>
              <p>NOW WITH LOWER PRICES</p>
              <p>FASTER SPEEDS - UP TO 60 MBPS!</p>
          </div>
      </div>
  </div>
</div>
<div class="Phone">
  <h3>PHONE</h3>
  <h7>RESIDENTIAL & COMMERCIAL</h7>
</div>
<div class="Television">
  <h3>TELEVISION</h3>
  <h7>SHAW DIRECT / INTERNET TV</h7>
</div>

Edit: Provided above is the complete HTML code which might help in identifying where the problem lies.

Answer №1

Your CSS contains a misspelled class and all your paragraphs are positioned on top of each other. To fix this, wrap your content in a container and adjust the positioning. Additionally, remove the unnecessary float attribute.

.HappyLady {
  position: relative; 
  width: 100%;
  }
.HappyLady div.contents {
  position: absolute; 
  left: 0; 
  top: 80px;
  width: 100%; 
  }
<div class="HappyLady">
    <img src="http://placehold.it/400x400" alt="" />
    <div class="contents">
        <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
        <div class="Benefits">
            <p>UNLIMITED PLANS AVAILABLE</p>
            <p>NOW WITH LOWER PRICES</p>
            <p>FASTER SPEEDS - UP TO 60 MBPS!</p>
        </div>
    </div>
</div>

Answer №2

Consider optimizing your code by utilizing the image as a background-image:

.JoyfulCoder {
     position: absolute; 
     width: 100%;
     background-image: url('http://truespeed.ca/wp-content/uploads/2016/06/happylaptoplady.png');
     background-size:cover;
}

Then, you can eliminate the image tag from your code entirely.

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

Guide on importing a CSS/SCSS file into a class from a node_module in order to modify the theme of a component

I am utilizing syncfusion components in my project. My goal is to have a specific component switch to Dark theme when the app-dark class is applied to the containing div element. In order to achieve this, I need to import two themes as shown below: @impor ...

Issue: Unable to create the restangular module because: the variable '_' is not defined

Upon integrating Restangular into an existing website, I encountered a JavaScript error that stated: Failed to instantiate module restangular due to: '_' is undefined I'm unsure of what this means. Can anyone clarify why '_' is ...

JQuery isn't functioning properly on dynamically generated divs from JavaScript

I'm currently tackling an assignment as part of my learning journey with The Odin Project. You can check it out here: Despite creating the divs using JavaScript or jQuery as specified in the project requirements, I am unable to get jQuery's .hov ...

Iterating through an array with ngFor to display each item based on its index

I'm working with an ngFor loop that iterates through a list of objects known as configs and displays data for each object. In addition to the configs list, I have an array in my TypeScript file that I want to include in the display. This array always ...

What are the best techniques for recreating the "Price Compare" responsive card layout?

Comparison of Plans on Desktop: https://i.sstatic.net/fzTeOJF6.png Mobile Plan Comparison: https://i.sstatic.net/2FBEmdM6.png Hello there, I'm seeking suggestions for designing this particular section of the layout. This section is visible both i ...

Ways to flip the sequence of lines within a div without altering the formatting, word arrangement, and other elements

I need to rearrange the order of my lines while preserving the styling of words and the sequence I have created. Code Snippet: <textarea id="mytext""> Buy - 3 Potatoes $6.25 Sold - 3 Napkins $7.12 Buy - 5 Fries $11.62 Sold - 7 Pot ...

What to do when IE6/IE7 margins disappear after moving a relatively positioned floated div using jQuery's .hover()?

Sharing my code with you: http://jsbin.com/uhera3/edit Encountered an issue where the relatively positioned floated divs move to the left in IE7 when using jQuery's .hover() function. Any insights on how to resolve this problem? ...

Creating Positioning Magic with HTML Elements

Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development. The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of th ...

Designing a logo atop a Jquery tab

In the layout I have designed, there is a header followed by a jQuery Tab navigator. The tabs have padding on the left side, and I want the header image to overlap this area. Currently, the image is hidden behind the tab panel. Which CSS property can be us ...

Transforming Form Input Fields into a Nested JSON Format with the Power of JQuery

I'm facing a challenge in converting the input fields below into a nested JSON file structure in my HTML page. Despite trying various methods, I haven't been successful yet. These inputs are retrieved through AngularJS ng-repeat. Any assistance o ...

A flashy Rickshawgraph with the ability to modify the background color of the top data series

I am facing a challenge in modifying the background color of the rickshawgraph widget in dashing based on the maximum value of the highest graph from the latest incoming data. While I have successfully implemented this feature for one series, I am struggli ...

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

The Tailwind classes applied directly in HTML are not functional, whereas the ones from the external CSS file are effective

After testing the classes, the intended look of the page should resemble this: https://i.stack.imgur.com/BVs57.png However, it currently appears like this: https://i.stack.imgur.com/AjN3z.png The JSX code in the file is as follows: < ...

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

I am encountering an issue while attempting to load data into my Flask page and log it in the console. The error I keep receiving is shown below: VM165:1 Uncaught ReferenceError: data is not defined at <anonymous>:1:13 Below are snippets of cod ...

Transforming the hue of a radio-button

When it comes to the default CSS code for radio buttons, they appear gray when unselected and blue when selected: https://i.stack.imgur.com/hsazr.png However, I have a specific requirement for them to be black in both states. In order to achieve this, I ...

Exploring CSS Selectors: Finding Distinct Values Within Child Elements

I am currently in the process of developing selenium tests for a web application. The challenge I am facing is that the application utilizes dynamically generated forms, resulting in a plethora of non-unique elements to navigate through (#ids are limited o ...

Leveraging HTML classnames for metadata purposes

Is it recommended to use descriptive class names in HTML that fully describe its content, such as navbar-static-8 for a fixed navbar with 8 items? Alternatively, should the metadata be separated into individual attributes like type="static" items="8"? I ...

CSS: How come this inline-block div is not appearing on the same line as intended?

I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px. If I switch the ...

How can I switch the view in fullcalendar to 'listMonth' and then automatically navigate to a specific date?

Is there a way to make my fullcalendar switch to the 'listMonth' View and display or scroll to a specific date, like '2015-04-25'? If anyone has any suggestions on how to achieve this, please let me know. Here is the code I currently h ...

Creating an impenetrable and foolproof text box

I'm trying to secure a textbox that I have hidden and set as readonly using the following code: <div id="employeechosen" class="form-group"> <input type="hidden" name="chosen" id="chosen" class="form-control" required="" readonly> < ...