˹ TUTORIALS ˼
˹ CLEAN EDGE DESIGNS ˼ / Closed / Read notice on chapter 35
Please Subscribe to read the full chapter
Text on top of image
Difficulty: Easy - Medium - Hard
This is an easy code to make both for those who are new to codes and for those who are familiar with codes.
You will learn how to add text on top of images.
Now, first we need the image code, which looks like this:
< img src="IMAGE URL">
img = image
src = source
" " = put the image URL between those marks
(not the space between < & img)
Second, we need the text code. I will use a Headline 1, H1 code, but you can also use this part for other text types and styles, such as bold, italic, strikethrough, paragraph etc. My text code looks like this:
< h1>Text< /h1>
(not the space between < & h1 and < & /)
The codes above are not styled yet. We have to style the text codes to make the text appear on top of our image.
Let's add margin to our text:
< h1 style="margin-top:-10px;">Text< /h1>
style="" = where we style our item
margin-top:; = how much space there is from the top
-10px = minus 10 pixels from the top, moves our item higher
You can change the -10 to whatever number you'd like to make it fit on the image.
IMPORTANT:
Put your text code after the image code
The item added after the text code, will come underneath the text and may come on top of the image too. Just add the same styling as the text code, change the number, and you'l
This is an easy code to make both for those who are new to codes and for those who are familiar with codes.
You will learn how to add text on top of images.
Now, first we need the image code, which looks like this:
< img src="IMAGE URL">
img = image
src = source
" " = put the image URL between those marks
(not the space between < & img)
Second, we need the text code. I will use a Headline 1, H1 code, but you can also use this part for other text types and styles, such as bold, italic, strikethrough, paragraph etc. My text code looks like this:
< h1>Text< /h1>
(not the space between < & h1 and < & /)
The codes above are not styled yet. We have to style the text codes to make the text appear on top of our image.
Let's add margin to our text:
< h1 style="margin-top:-10px;">Text< /h1>
style="" = where we style our item
margin-top:; = how much space there is from the top
-10px = minus 10 pixels from the top, moves our item higher
You can change the -10 to whatever number you'd like to make it fit on the image.
IMPORTANT:
Put your text code after the image code
The item added after the text code, will come underneath the text and may come on top of the image too. Just add the same styling as the text code, change the number, and you'l
Please Subscribe to read the full chapter
Comments