Place a written message on an picture

<head>
<style>
.relative{position:relative; width:600px;}
.absolute-text{position:absolute; bottom:1; font-size:12px; font-family:"vedana"; background:rgba(251,251,251,0.5);
padding:10px 20px; width:10%; text-align:center;}


</style>
</head>
<body>

<div class="relative">
<img src="Chttps://i.stack.imgur.com/Ss3PX.jpg">
<p class="absolute-text">16<br>august</p>
</div>

                                          

</body>

I've been attempting to place text in the bottom-left corner of an image using HTML and CSS, but so far I have not been successful. Here is a sample image for reference:

https://i.stack.imgur.com/Ss3PX.jpg

No matter how many times I try, I haven't been able to get it right...

htmlcsscss-position

Answer №1

To achieve text overlay on an image, you need to utilize css positioning with both absolute and relative properties. The parent container should have a position of relative, while the child elements should be positioned absolutely. 

.container {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="https://www.examplesite.com/example.jpg" alt="Example" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

Answer №2

By utilizing absolute positioning, you have the freedom to position text and images separately. This feature enables you to place text in any location on a webpage, even directly on top of an image.

Answer №3

Here is a suggestion for styling:

HTML:

<div class="image-container">
    <a href="">Link</a>
</div>

CSS:

.image-container{
    background-image: url('image_location');
    width:100px;
    height:100px;
    position:relative;
}
a {
    display: block;
    position:absolute;
    bottom: 0;
    left: 0;
}

Answer №4

Don't forget to include px after 1 in the following line: bottom: 1;

.relative{
  position:relative; 
  width:600px;
 }
 
.absolute-text{
  position: absolute; 
  bottom: 0; 
  font-size: 12px; 
  font-family: "vedana"; 
  background: rgba(251,251,251,0.5);
  padding: 5px 10px; width:10%; 
  text-align: center;
  margin: 0;
 }
<head>
<style>



</style>
</head>
<body>

<div class="relative">
<img src="https://i.stack.imgur.com/Ss3PX.jpg">
<p class="absolute-text">16<br>August</p>
</div>

                                          

</body>

Answer №5

-> it becomes so much easier when you change bottom:1; to bottom:0;

-> always remember to use pixel values (px) in CSS when specifying values greater than 0, for example 1px, 2px, etc.

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

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

javascriptjqueryhtmlcssajax

How would you utilize jQuery to access the "option" array of a select control with the attribute of multiple=true by utilizing the find() method?

When using jquery, I am attempting to access selected items from a select control that has multiple=true. My goal is to reference them by name criteria and then iterate through the list. Below is my current code snippet: var currentRow = $(this); // sele ...

javascriptjqueryhtmlselect

Adjusting the height of a textarea within a table

My textarea's height is supposed to be 500%, but it's not changing. I suspect that being inside a table might have something to do with the issue, but I'm unsure of what needs to be adjusted to set the height correctly. Surprisingly, the wid ...

javascriptjqueryhtmlcss

PHP Table Sorting Functionality

After inputting the correct code, I am still facing an issue with the table sorting not showing up. Can someone assist me with this problem? I have included both my CSS styles and PHP coding. Thank you for your help! Here is a visual representation of the ...

phphtmlsortinghtml-table

The H1 heading sets the stage, layered behind the captivating background image

I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. ...

htmlcssflexbox

Transforming the content of a <div> into a variable in PHP

There is a website where you can place orders for various products. The titles of the products available to order are embedded in the HTML code like this: <div class="whatever"> Title </div> I am trying to extract this "title" and assi ...

phphtml

Transform ajax functionality into jquery

I need help converting an AJAX function to a jQuery function, but I'm not sure how to do it. function convertToJquery() { // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Set up variables needed to send to PHP file var ur ...

javascriptjqueryhtmlcssajax

When applying multiple classes with NgClass, use the property name instead of the class content

I am facing a challenge trying to add multiple classes (in this case 2) to a custom component that includes a list item component from MDBootstrap: App.module.ts <custom-list-component size="w-50"> <custom-list-item-component href="#">lis ...

cssangularng-classmdbootstrap

Increasing box width in Django

I'm currently working on a website using Django all-auth for authentication. Everything is functioning perfectly, but I'm wondering if there's a way to increase the size of the username and password input boxes using HTML. Below is the code ...

htmlcssdjango

Large background images on websites often appear pixelated

Check out my website: I've noticed that the background image appears blurry on my screen, despite its size being 1920 x 1080 px. I've tried using a jquery script to manage this background issue as all of the CSS methods have provided unsatisfact ...

jquerycssimagewebbackground

What is the best method for connecting my HTML to jQuery code?

Apologies for my lack of experience in coding, but I will try to keep this brief. To put it simply, when I insert my jQuery code directly into the HTML file below the content, it works perfectly - the element I want to animate 'hides' and then & ...

javascriptjqueryhtml

Create a custom navigation bar using PlayFramework for a unique video streaming website

Attempting to create a dynamic navigation bar in Play using the code below in my main.scala.html file: @(title: String)(content: Html) <!DOCTYPE html> <html lang="en"> <head> <title>@title</title> <li ...

htmlcssscalaplayframework

Transforming an HTML jQuery contact form into an ASP.NET solution

I have developed a contact form using HTML5, Bootstrap, and jQuery. The form includes hidden fields that are only displayed when the user selects a radio button. I have implemented validation to ensure that the hidden fields are not required to be filled o ...

jqueryhtmlasp.net

Unable to display <div> elements from CSS within the Wordpress Text Widget

Having trouble displaying a <div> from CSS in a Text Widget on Wordpress. <div class=”deffgall-cutlure” ></div> style.css .deffgall-cutlure { display:block; position:relative; width:100px; height:100px; backgrou ...

csswordpress

Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gap ...

cssborderline-numberscss-counter

Adjusting canvas size to match content dimensions

I posed a similar inquiry and it was categorized as a duplicate even though the suggested duplicate did not provide an answer to my question. Edit: The purported duplicate was [stackoverflow.com/questions/17211920/make-canvas-height-auto][1] I am utilizi ...

javascriptjqueryhtmlcanvas

Troubles encountered when wrapping columns in bootstrap framework

I'm experimenting with a design that utilizes Bootstrap's grid system, but I'm experiencing some challenges with the content either wrapping or extending off-screen. What I want is to have a sidebar with fixed width (around 250px), and its a ...

htmlcssbootstrap-4

PHP encountered an issue while trying to compare the value stored in the $_POST variable with the value stored in a

In my current project, I have utilized a JSON file to store data and PHP to retrieve and display it. However, I am facing an issue when comparing values from $_POST - specifically, if the value contains spaces, the comparison fails. Here is the problematic ...

phphtmljsonformspost

Problem with Google's PageSpeed Insights - Focus on Making Most Important Content Visible

During the process of creating a comprehensive website for a client who has a strong affinity towards Google tools and recommendations, I have encountered an interesting challenge: Despite my best efforts, I seem unable to attain a flawless score for the ...

javascriptphphtmlcssgoogle-pagespeed

What is the method for retrieving the IDs of checkboxes that have been selected?

I attempted running the following code snippet: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://static.jstree.com/v.1. ...

javascriptjqueryhtmlajaxjstree