Add a responsive text overlay to an image

As I work on my HTML5 jQuery Mobile cordova mobile app, I find myself dedicating time to placing text on an image with responsive design for mobile devices.

Shown here is the sample screen on a smaller device.

https://i.sstatic.net/48Cwx.jpg

This is how the sample screen appears on a larger device.

https://i.sstatic.net/zmZLG.jpg I aim to position the text Some Text at the bottom center of the image while ensuring it adjusts responsively.

Below is the jQuery Mobile code that generates the image and text.

<div class="ui-block-a">
  <div class="ui-bar" style="padding:5px">
    <img style="height: 100%;width:100%" src='img/book150.png'/>
     <p id="text">Some Text</p>
  </div>
</div>

I have attempted using the following CSS style, which only works when the image size remains constant:

#text {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}
jqueryhtmlcsscordova

Answer №1

To achieve proper alignment, it's essential to assign a position:relative to the parent element.

If you want to horizontally center a block element that is positioned absolute, follow these steps:

position:absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

Referenced from MDN

Elements with relative positioning still adhere to the normal flow of elements in the document. Conversely, an absolutely positioned element is removed from the flow and does not affect the positioning of other elements. The absolute position is determined relative to the nearest ancestor element with a specified position (other than static). If there is no such ancestor, the initial container is used as the reference point.

Snippet

.ui-block-a {
  position: relative;
  max-width:150px; /*ensure to set a max-width or width */
}
.ui-bar {
  padding: 5px
}
#text {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
   /*demo*/
  bottom: 5px;
  background: red;
  max-width:100px;
  text-align:center

}
img {
  height: auto;
  max-width: 100%
}
<div class="ui-block-a">
  <div class="ui-bar">
    <img src='//lorempixel.com/150/150' />
    <p id="text">Some Text</p>
  </div>
</div>

Answer №2

Consider replacing the tag #text with p. This means changing the following code:

#text {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}

To this:

p {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}

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

Error: The parent container element cannot be edited until the child element has been properly closed

I received a Script Error stating that I am unable to modify the parent container element before the child element is closed. In response, I clicked Yes but my web page isn't being displayed. In the code for my Product page, I start with: http://past ...

javascriptjqueryyuiyahoo-api

The function val() will not extract the present input value

Can't seem to retrieve the updated value of an input field in my ajax log-in form. Here's the code snippet: <form method="post" id="contactform"> <label for="name">Username</label> <input type="text" id="un" placeho ...

jqueryhtml

Getting information from PHP through AJAX for transmission to a separate PHP script

Hi everyone, I'm facing a bit of a challenge with my project. Here's the situation: I've got a PHP file that interacts with a database and displays the query results. Then, there's an HTML file that uses AJAX to show these results dyna ...

javascriptphpjquerymysqlajax

Hide the form using jQuery specifically when the login submit button is selected, not just any random button

One issue I am facing is that when a form is submitted correctly, it hides the form. However, I have added a cancel button to close the pop-up thickbox window, but instead of closing the window, it also hides the form. How can I ensure that hitting cancel ...

jqueryhtmlajaxforms

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

htmlcss

Using a Laravel foreach loop to display data with two different properties

I am seeking assistance with my foreach loop in the view. Controller.php $expenses = Expense::groupBy('category_id')->selectRaw('sum(amount) as sum, category_id')->pluck('sum','category_id'); $categories = C ...

phphtmllaravel

Issue with Jquery checkbox calculator constantly displaying Not a Number (NaN)

I'm facing an issue with jQuery. The Custom Wpform Checkbox Field is returning NaN. HTML <div class="wpforms-payment-total"> $ 85 </div> <input type="checkbox" name="myBox2" size="1 ...

javascriptjquerynode.jswordpress

How to find the number of times an element appears using jQuery

I have a div that holds 5 images. Is it possible to write each image's occurrence to a paragraph tag? $("#myDiv img").each( function(index) { $("p").append(index+1); }); The result obtained is: 11111 But what I desire is: 12345 ...

javascriptjquery

The Ajax form is failing to send any headers

Whenever I submit my form, the header data doesn't seem to be coming through. Even though I've done this type of submission numerous times (figuratively speaking), there's always a chance that I might be overlooking something. Any ideas? Che ...

javascriptjqueryajax

Adjust Text to Perfectly Fit Button

I am developing a quiz using bootstrap and javascript. One issue I encountered is that the text in the buttons can sometimes be longer than the button itself. This results in the text not fitting properly within the button, making it unreadable on mobile ...

javascripthtmlcsstwitter-bootstrap-3

Is it possible to load JavaScript code once the entire page has finished loading?

My webpage includes a script loading an external JavaScript file and initiating an Ajax query. However, the browser seems to be waiting for example.com during the initial page load, indicating that this external dependency may be causing a delay. Is there ...

javascriptjqueryasynchronous

Is there a method to ensure that flex children adhere to a minimum height, while still permitting them to exceed the height of their container?

This code snippet sets up a CSS layout where child elements within a container have dynamic heights. The issue arises when the contents of #child-2 spill over into #child-3, even though min-height: 100% is set on #child-2. It seems that #child-2 won't ...

htmlcssflexbox

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

In my code, I am currently working on drawing rectangles on the corners of an image using JavaScript. To achieve this, I first extract the image data from a canvas element. // Get image data let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) ...

javascripthtmlcanvasfilterpixel

Utilizing jQuery to transmit an incessant stream of Ajax .post variables to the server

Is there a way to continuously send updates to the server using jQuery with minimal intervals? This is specifically for updating the cursor position of one person on others' screens, and will be used in an HTML5 whiteboard prototype. What options ar ...

jqueryajaxsetintervalcontinuous

What is the best way to attach an infowindow to markers that have been populated from an XML file?

Does anyone know how to include an info window on markers retrieved from an XML file? Below is the code snippet I am currently using to load the markers: google.load("maps", "3", {other_params:"sensor=false"}); google.load("jquery", "1.3.2"); function ...

jqueryxmlgoogle-maps-api-3

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

htmlcssreactjsnext.jstailwind-css

Top method for independently scrolling overlapping elements in both the x and y directions

Sorry if this is repeating information. I have a structure of nested divs like this: -container -row In order to enable scrolling without the default scrollbar appearing, each container and row has an additional container. My goal is to be able to scrol ...

javascripthtmlcssdom-eventsinline-styles

Activating animations in a separate div by hovering over it

I customized my navbar on a personal website, with my name appearing on the left side. I'm experimenting with creating a "wave effect" where hovering over each character triggers an animation. Any suggestions for improving this approach? Current stat ...

javascripthtmlcssreactjssass

How can I set the checkbox of an item when clicking on a span element containing the checkbox within the Bootstrap Treeview parent or child relation?

I am experiencing an issue with the checkboxes I added to my treeview. Currently, there is no relationship between the nodes (parent or child) and the checkboxes. What I want is that when I click on a node or its corresponding checkbox, it should automati ...

javascriptjqueryajaxcheckboxtreeview

The jQuery gallery is experiencing some functionality issues

Having an issue with the gallery on my website (currently on my computer, not yet uploaded to a server). Here is the script for the gallery (loaded from the server using PHP): $(document).ready(function() { $('.gallery').hide(); $(' ...

phpjavascriptjqueryhtml