Text on HTML Images: Do it Yourself

The PRE Element

Imagine that you want to write some scientific text (e.g E=mc² or something longer) and it concerns a plane or rocket. Would it not be good to have the picture of a plane or rocket as the background?

The PRE element is a block element. It can be used to write scientific content (e.g. program code) that needs a lot of white space or special formatting. You can put the PRE element in any Table Cell of your web page. You can give it dimensions in CSS.

You give a background image to a PRE element similar to the way you do for a DIV element.

Gradient

If you have an area of a picture made of lines and the lines are slowly changing colors as your eye moves from one position to another, that area is a gradient. You must have seen that as a background on some web pages. The gradient might be a background for the body element (the whole page), TD element, DIV element, or some other block element.

One way to achieve this is to use your drawing tool to create a gradient. Save the result as an image and then use an URL link to make this the background of your web page. The problem here is that pictures take a long time to  download (to appear in the user’s browser).

The solution is this: if you want a horizontal gradient, create a gradient that is one pixel in width and as tall as you want using your drawing tool. Save the image in a directory (folder). Use an URL link to link it as the background of your web page. Use CSS (as shown below) to repeat it all over the required background of your web page.

If you want a vertical gradient, then create a gradient of that is one pixel tall and as wide as you want using your drawing too. Save the image in a directory (folder). Use a URL link to link it as the background to your web page. Use CSS (as shown below) to repeat it all over the required background of your web page.

To repeat a background image horizontally, have code like the following in your CSS.

element {background-image: url(image.gif); background-repeat: repeat-x}

To repeat a background image vertically, have code like the following in your CSS.

element {background-image: url(image.gif); background-repeat: repeat-y}

To repeat a background image all over (horizontally and vertically), have code like the following in your CSS.

element {background-image: url(image.gif); background-repeat: repeat}

If you had text, A Elements, or other elements, even an image in your block element, then you will see them on top of your nice gradient background.