How to write title or text over image css

How to write title or text over image css

Write title or text over image

to write title or paragraph over images you have to understand position: relative; and position: absolute; with those two css attribute you can write anything over your image so lets see how it works .

Css position absolute

position absolute just from the name you understand that position absolute mean that the position of the object you are positioning will be at the same place whatever happen in the page , this is mean that if you set position absolute and put top:0 your object will be at the position 0 even if there is any other object there .

Css position relative

position relative from the name you will understand that the position of the object will be relative to her parent . position absolute and relative work together , so if you put an absolute div inside relative div the absolute div will be relative to her parent so if you put top:0 it will not positioning at the top of the page it will be at the top of her parent .

How to write paragraph over image

to write paragraph over image you have to create a div insert an image and a title or a paragraph inside that div , the position of the div must be position:relative; and the position of the paragraph must be absolute; to put paragraph in bottom; you have to put bottom:0px; if you want it in top change top:0px; just like in this code .

<style>
*{margin:0px;padding:0px;}
.image{width:250px;background:teal;position:relative}
.image img{width:100%;display:block}
.image h1{position:absolute;bottom:0px;background:#ccc;width:100%;}
</style>

<div class="image">
<img src="flower.jpg">
<h1>this is my text</h1>
</div>
Leave comment