Welcome to How2Code

In this lesson, we will:

  • Learn how to put images on webpages
  • Learn how to put image/solid-color backgrounds behind text

Let's get started:

Before we start this lesson, make an image (you can use MSPaint), and save it as example-image.png.

Here's mine:
Example Image

To make an image show up in your webpage, first you need to know the path from your webpage to the image. For example, if you're in C:\Documents and Settings\Ben\Desktop (Windows), or /home/ben/Desktop (Linux), it's best to make a folder and put everything you're using for making your webpages in it. Alternatively, if you have a virtual server, you can use that and your files will show up at http://localhost.

Anyway, putting both files (the image and the page) in the same folder is good enough.

<img src="example-image.png" alt="Example Image" />

That's all there is to it! All you need is an img tag (self-closed) with a src and an alt attribute.

But what if I want my image/color as a background?

This paragraph has a cyan-colored background. It's just as simple to change the color behind the text as it is to change the color of the text itself.

<{TAG} style="background-color:{COLOR}">{CONTENT}</{TAG}>
<{TAG} style="background-image:url({URL})">{CONTENT}</{TAG}>

But when I use an image, it repeats again and again! How do I stop it from doing that?
All you need to do is add another style selector to change the repeat style.

<{TAG} style="background-image:url({URL});background-repeat:{REPEAT STYLE}">{CONTENT}</{TAG}>

The repeat style can be:

  • no-repeat
  • repeat-x
  • repeat-y

See you next time!

How2Code was filmed before an emulated sabayon linux computer. No actual computers were harmed in the making of this webpage. How2Code is powered by electricity and the food that Ben ate while he was thinking about what he should write. Do not eat this. It doesn't taste good. Viewer discretion is two words.

This is Ben, signing off. See you next time!

Go back to the table of contents