Many times we want to have an image or a banner with some text on it. The most simple solution is to embed the text in the image so you can exactly position and design as needed, but there are 2 downsides here:
1. Changing the text will become a hassle. Each time you will need to find the source file of the graphics, replace the text, save and upload
2. SEO – search engine will not be able to read the text
ok, so let’s do it with text positioned over an underlying image:
|
1 2 3 4 5 6 |
<style> .imgwrp {position:relative;} .imgtitle {position:absolute;bottom: 12px;left: 16px;color:white;font-size:22px;} </style> <div class="imgwrp"><img src="image.jpg"><div class="imgtitle">My Title</div></div> |
*in the above code modify the following:
1. “image.jpg” should be replaced with the image you are using
2. “My Title” should be replaced with a title
3. CSS properties for “.imgtitle” should be adjusted according to the desired position and design (font, color etc.)