HAPPY NEW YEAR 2019
How to put text over image with CSS
Author
Author

Robert Nicjoo [69]

I love Laravel & WordPress, interested to pass little knowledge that I have to others.

Qr-Code

Scan to visit on mobile

TJD STUDIO is Hiring

Photographer & Videographer

Apply now Jabodetabek

How to put text over image with CSS

Recently I was working on project for user and It requires to put text over image for users listing page and here is how I did it.

 

Final result:

 

What we need?

{{$user->fullname}} 
><span id=

As you can see in sample code above we need a div with id or class and inside that our img input which is our image in html way and another id or class for our text and that's all.

 

Now it's time to add our CSS codes:

#container {
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  padding: 0 10px;
  position: absolute;
  color: #fff;
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  font-size: 24px;
  bottom: 10px;
}

 

Note: you might have notice that I did not use id="image" in my img input, well you are right and that's only because I user class="img-responsive" which is responsive class of bootstrap for images and that will do the magic for me cool

 

Did you find this tutorial interesting? share it with your freinds.

How do you like this article?

From Store

JobGard
JobGard
Rp. 504,500
Kerja Remote
Kerja Remote
Rp. 504,500
Back to top