How to place Text box over an Image

HandyCSS is providing you lots of CSS tips that can help you out when you are stuck somewhere while designing a website. In our How-to section we continuously provide solutions to different problems that have been faced by different web designers. Today we are going to solve another issue.

There can be some situations where you require to put a text or input box over an image. That can be done easily with the help of CSS positioning properties. We can simple place a text box over an image by creating a class for text box and set its position property to absolute, and defining its position by using left and top property. Below we provided an example code that use can implement in your design, you just need to set the position of left and top by changing their respective values.

CSS

1
2
3
4
5
6
7
8
9
10
11
.pos
{
position:absolute;
left:100px;
top:150px;
}

HTML

1
<img src="test.jpg"><input type=text></img>


Related posts

No Response

Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.