text overlapping images
simple // ur most basic layout tutorials thread
discussing :
text overlapping images
introduction;
in this tutorial, i'm going to teach you how to overlap text on an image. this tutorial is really easy and you don't need to know much to do this. tweaking something like this should be no problem.
margin - the margins for the (in this case) image
margin - the margins for the (in this case) image
video;
if you don't understand the typed instructions/tutorial very well, here's a video version to help your understanding of this tutorial.
The quality of the video is quite low so please excuse that. it's best recommended to open this video in youtube and watch it from there. if you make is full-screen, then increase the quality of the video.
The quality of the video is quite low so please excuse that. it's best recommended to open this video in youtube and watch it from there. if you make is full-screen, then increase the quality of the video.
tutorial;
doesn't require the source at all & won't be much to type either.
{VERSION one}
step one:
click on the icon of the house at the top to insert your image. paste direct link to image in the space under URL. change dimensions of image if you want, then hit "ok" (green button).
preview:
step two:
once you have your image, hit enter or shift+enter and type your text. fix your font, font size, color, etc. when finished, click on your image to highlight. click on the icon again and click on the last tab (should say "advanced"). put margin in the last space that has text in it already.
preview:
TIFFANY
step three:
save changes.
preview:
TIFFANY
{VERSION one}
step one:
click on the icon of the house at the top to insert your image. paste direct link to image in the space under URL. change dimensions of image if you want, then hit "ok" (green button).
preview:
step two:
once you have your image, hit enter or shift+enter and type your text. fix your font, font size, color, etc. when finished, click on your image to highlight. click on the icon again and click on the last tab (should say "advanced"). put margin in the last space that has text in it already.
preview:
TIFFANY
step three:
save changes.
preview:
TIFFANY
this version will all be done in the source and it'll all be done in one go.
*remove spaces after every '<' (opening bracket) to get the code to work properly.*
{version 2}
step one:
type out your code with the img tag, src attribute, image url, and style attribute. in the style attribute, make sure you have your height, width, and margin (include anything else if you want). type < br> (breakline) and then add your span tag, style attribute and decorate your text. then type your text and make sure it's not inside the brackets.
preview:
< img src="http://i1307.photobucket.com/al
bums/s587/MagicalDreams1/Banners/Je
ssicaBanner_zpsf5eba520.png" style="height: 57px; width: 190px; margin: 0px 0px -20px;"/>< br>< span style="font-family: times new roman; font-size: 10px; color: #4f4f4f; letter-spacing: 1px; text-transform: lowercase;"/>< i>tiffany< /i>
step 2:
double-check and make sure you have everything and that there are no errors. then exit the source and you'll have your text overlapping the image.
preview:
tiffany
*remove spaces after every '<' (opening bracket) to get the code to work properly.*
{version 2}
step one:
type out your code with the img tag, src attribute, image url, and style attribute. in the style attribute, make sure you have your height, width, and margin (include anything else if you want). type < br> (breakline) and then add your span tag, style attribute and decorate your text. then type your text and make sure it's not inside the brackets.
preview:
< img src="http://i1307.photobucket.com/al
bums/s587/MagicalDreams1/Banners/Je
ssicaBanner_zpsf5eba520.png" style="height: 57px; width: 190px; margin: 0px 0px -20px;"/>< br>< span style="font-family: times new roman; font-size: 10px; color: #4f4f4f; letter-spacing: 1px; text-transform: lowercase;"/>< i>tiffany< /i>
step 2:
double-check and make sure you have everything and that there are no errors. then exit the source and you'll have your text overlapping the image.
preview:
tiffany
Comments