Add An Image

Let’s add an image, we’re going to add a picture of Larry, since it’s his page after all. But you can add a picture of yourself, or anything you like. We’ve included a picture of Larry in your assets folder.

To add our image, we’re going to use an <img> tag. <img> tags belong to a special group of HTML tags called self closing tags. These as you’ve probably guessed, don’t have closing tags. Instead, we use attributes to tell our <img> tags the information they need to display properly.

  <img src="http://placekitten.com/220/220" alt="super cute kitten">

This an image that that will display a picture of a very cute kitten. The src attribute is how we tell our <img> tag where to find the image it will display. If for whatever reason, our image doesn’t load properly, the alt text will be displayed.

The alt attribute is also REALLY important for accessibility. If someone who uses a screen reader visits your website, the alt text is read, so always remember to add an alt tag and describe your image.

Enough chit chat, let’s add this image already. We want to include an image tag in the <header> block. Let’s put it right above your <h1> tag, so your header looks something like:

  <header>
    <img src="assets/larry-keyboard.png" alt="Profile Picture" class="profile-picture">
    <h1>Larry Ducksworth</h1>
    <p>312 Farmhouse Lane, Quacksville, Newfoundland, A1B 2C3</p>
  </header>

Let’s also add a class .profile-picture so we can style our picture of Larry to look exactly how we want it to.

In styles.css, add:

  .profile-picture {
    width: 150px;
    height: 150px;
    padding: 1%;
  }

Save both styles.css and profile.html and refresh your page. You should see something like this:

Let’s add a little bit more CSS so our picture looks exactly how we want it.

To our .profile-picture CSS block, let’s add a background-color and border-radius:

  .profile-picture {
    width: 150px;
    height: 150px;
    padding: 1%;
    background-color: #466C88;
    border-radius: 50%;
  }

Save styles.css and refresh your page.

Lookin’ good.

If you want to change the picture to something else, change the src attribute on your <img> tag. Can’t think of an image that is equally or more adorable than Larry? Here are some fun sites that will provide links to some great images:

• Place Cage
• Fill Murray
• Place Kitten