CODEWITHSUNDEEP
htmlcsscss-position
Khanal Web
Khanal Web

Reputation: 7

Position a text in an image

<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.sstatic.net/Ss3PX.jpg">
		<p class="absolute-text">16<br>august</p>
</div>

                                          

</body>

I have a image and want some text in button-left corner of that images using html and css...
here is an image something looks like that:

enter image description here

I tried many times but it didn't came..

Upvotes: 0

Views: 271

Answers (5)

Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

-> so simple when you write bottom:1; change bottom:0;

-> remember when you write greater than 0 value in css please write value with px example 1px, 2px, etc. 

<head>
<style>
.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:10px 20px;
  width:10%; 
  text-align:center;
}


</style>
</head>
<body>
  <div class="relative">
    <img src="Chttps://i.sstatic.net/Ss3PX.jpg">
    <p class="absolute-text">16<br>august</p>
  </div>                                        
</body>

Upvotes: 0

Vaibhav Shettar
Vaibhav Shettar

Reputation: 810

You have to use css position absolute and position relative. make parent relative and child relative. 

.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.w3schools.com/w3images/hamburger.jpg" alt="Snow" 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>

Upvotes: 3

DragonBorn
DragonBorn

Reputation: 1809

You forgot to give px after 1 in this 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.sstatic.net/Ss3PX.jpg">
	<p class="absolute-text">16<br>August</p>
</div>

                                          

</body>

Upvotes: 0

Alex
Alex

Reputation: 497

you can try something like this

html:

 <div class="img">
    <a href="">Link</a>
    </div>

css:

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

Upvotes: 0

gorlux
gorlux

Reputation: 129

You can use absolute positioning to independently place the text and the image. This allows you to place text anywhere on the page, including on top of an image.

Upvotes: 1

Related Questions