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

The bold horizontal line in HTML tables is a bit unusual and is caused by the border-collapse property

Edit 1: The strange issue appears to be related to the border-collapse property in CSS, as it can be resolved by using border-spacing: 0px. However, the question remains, why does border-collapse result in this behavior? It seems to be connected to scaling ...

htmlcss

The Flowbite CSS plugin seems to be malfunctioning when attempting to include it within the tailwind.config.js file

Incorporating Flowbite (both JS and CSS) into my application has been a bit of a challenge. I managed to successfully insert the JS using Webpack and import 'flowbite' in the entry point JS file. As for the CSS, I followed the documentation and ...

csstailwind-css

Guiding motion of a parental container using a button

This seems like a fairly straightforward task, but I'm getting a bit frustrated with it. Is there a way to move an entire div by simply holding down the mouse button on a particular button? let container = document.getElementById('abo ...

javascripthtmlmouse

What is the best way to display an HTML array?

I'm currently facing an issue with rendering an array containing both <p> and <div> items as HTML. Despite my attempts to render them properly, the values appear as plain code instead of formatted paragraphs. To illustrate, let's cons ...

htmlreactjsnext.js

Error Encountered: Anticipated 'styles' to consist of a series of string elements

I have attempted various solutions for this particular error message without any success. When launching my angular project using the angular cli via ng serve, everything runs smoothly with no errors. However, upon compiling it with webpack, I encounter th ...

cssangularwebpack

Is there a way to utilize jQuery to redirect to the href included in the HTML attachment?

I am looking to add a redirection feature to my website using the href provided in the code by jQuery. This will be done after playing an animation for better user experience. $(document).ready(function(){ $("a").click(function(event){ event.prev ...

javascriptjqueryhtmlcsshttp-redirect

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

javascriptjquerycss

Keeping the header in place: fixed positioning

This particular situation is quite challenging for me. I have a webpage that requires horizontal scrolling. There is a menu at the top of the page that needs to remain centered on the page at all times. Even with the use of jQuery, I am uncertain how to ac ...

htmlcsspositionfixed

Removing the border from a button in CSS and HTML

Looking to build a sleek and stunning website, but struggling with removing button borders. Any help would be greatly appreciated! If you'd like to check out the issue, visit this link: . I'm aiming for no button or image borders. To review my ...

htmlcss

Exploring the effects of zooming on YouTube videos in Firefox

Strange phenomenon, but my website appears to be having display issues specifically on Firefox. Surprisingly, it looks perfectly fine on IE9, Safari, and Chrome. The layout of the site in Firefox seems to change when I zoom in or out, resulting in the You ...

htmlcssfirefoxyoutube

Input automatically establishes default values

Something strange is happening with my HTML form. When I view it on a browser, default values are appearing in the text and password inputs that I did not set. The text input shows "creator" and the password input shows "*****". This only occurs when I set ...

htmlajax

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

javascripthtmljsonangulartypescript

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

IE9 causing trouble with CSS vertical alignment

I'm trying to center a button with text using Cuffon for the font, but I can't get it to align vertically and horizontally. The text-align property is working fine, but vertical align isn't. Here's the code for my div block: btndownlo ...

htmlcss

Are tabs best displayed as an overlay?

I've been searching high and low for a tutorial on how to create an overlay with tabs similar to the Google Chrome webstore. If anyone knows of a tutorial or a combination of tutorials that can help me achieve this, please let me know! Link Any guida ...

javascriptjqueryhtmlcssajax

Difficulty positioning CSS, aligning flex-box grid with floating text

My attempt to include an aside section is causing alignment issues with the navigation menu and the aside itself. The problem seems to be related to using float:left for the 200x200 images. I want the layout to be well-positioned like the expected image. I ...

htmlcsspositionblock

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?

I am currently working on an application that utilizes a component called "dropdown-component" throughout its pages. However, due to specific business requirements, I have been tasked with replacing "dropdown-component" with "custom-dropdown-component". Un ...

htmlangulartypescript

Function in head not triggering on OnMouseOver event

My goal is to have specific text display on my page when a user hovers over an image, with the text changing for each image. Below is the code snippet for the header section: <head> <title>Indian Spices Page</title> <link rel="s ...

javascripthtmlfunction

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...

cssangulartwitter-bootstrapng-bootstrap

What steps are involved in generating a scene dynamically with A-Frame?

Looking to transition from declarative coding in js and html to a programmatic approach with Aframe? You might be wondering if it's possible to modify your scene dynamically, here is an example of what you're trying to achieve: <!DOCTYPE html ...

javascripthtmlaframevirtual-reality