How To Add a Styled Profile Image To Your Webpage With HTML

Updated on August 9, 2021

Senior Manager, DevEd

How To Add a Styled Profile Image To Your Webpage With HTML

In this tutorial, we’ll walk through the steps of adding and styling the top profile image as displayed in the demonstration website.

Top section of demonstration website

Before we get started, you may want to pick a personal profile photo for including on your site. If you don’t have a profile photo, you can use any image for demonstration purposes or create an avatar through a site like Getavataaars.com. Otherwise, you can use the image from our demonstration site by downloading the image here. (For a refresher on how to add images to webpages using HTML, please visit our tutorial How To Add Images To Your Webpage Using HTML from earlier in this tutorial series.)

Once you’ve selected an image, save it as small-profile.jpg in your image folder.

Paste the following highlighted <img> element in between the opening and closing <div> tags you created in the last tutorial like so:

<div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;">
  <img src="ImageFilePath" style="height:150px">

Make sure to switch out the highlighted src address with the file path of your profile image. Note that we are also using the style attribute to specify the height of the image to 150 pixels. The <img> element does not require a closing tag.

Save and reload the page in the browser to check your results. You should receive the following:

Profile image on background image

Your profile image should appear as 150 pixels tall given the height we specified with the style attribute. It should also be located 80 pixels below the top of the <div> container, given the top-padding property we specified for the <div> container in the previous tutorial. Next, let’s add properties to our style attribute that will give our image a circular shape and a yellow border. We will also add alternative text to improve accessibility for site visitors who use screen readers.

Add the highlighted properties to your <img> element:

<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;" alt="This is a small profile image of Digital Ocean’s mascot, a blue smiling shark.">

Make sure you still have the correct file path of your image listed as the src address. Save the file and reload it in the browser. You should receive something like this:

Styled profile image

Before moving on, let’s briefly pause to study the code modifications we just made. Setting the border-radius value to 50% gives the image a circular shape. Setting the border value to 10px solid #FEDE00 gives the image a solid border that is 10 pixels wide and has the hexadecimal color value #FEDE00.

You should now know how to add and style a profile image to your website with HTML. We are now ready to add a title and subtitle to the webpage in the next tutorial.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel