html - Why does the complete image come down, when I give top-margin to the text? -
following html, displays picture in background , text nhs subscription written on it. when give class="nhs_head"
margin-top
text along image moves down. why ?
how can give text margin ?
<body> <div class="image_holder"> <div class="nhs_head"> nhs subscription </div> </div> </body>
css:
.image_holder { position:relative; background-image:url(bg2.jpg); height:768px; width:1366px; } .nhs_head { display:block; width:60%; margin:0 auto; border:2px solid white; font-family:calibri; font-weight:800; font-size:30px; color:white; }
if want apply margin-top
text can position absolute text in relatively positioned image div.
css
body, html { margin:0; } .image_holder { position: relative; background-image:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg'); height:768px; width:1366px; } .nhs_head { width:60%; margin:0 auto; border:2px solid white; font-family:calibri; font-weight:800; font-size:30px; margin-top: 30px; color:white; position: absolute; left:0; right:0; margin-top: 30px; }
Comments
Post a Comment