How to create an avatar image with CSS?

CSS Web Development Front End Technology

The avatar image on a website is a profile image visible under the author’s profile. Also visible under the team’s page where details of all the team members are visible on a company’s website. Let us see how to create an avatar image with HTML and CSS.

Set the avatar images

The images are placed just like any other image using the <img> element −

<img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt ="Amit Diwan" class="avatarImage">
<img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt ="John Smith" class="avatarImage">

A class is set for both the images so that we can style it and form like an avatar.

Style like an avatar image

Use the border-radius property and set it to 50%. With that, use the vertical-align property with the value middle. This sets the vertical alignment of the images.

The width and height of the avatar images are set to 250px −

.avatarImage {
   vertical-align: middle;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   border:3px solid black;
   margin: 10px;
}

Create avatar images

The following is the code to create an avatar image with CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      .avatarImage {
         vertical-align: middle;
         width: 250px;
         height: 250px;
         border-radius: 50%;
         border:3px solid black;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h1>Avatar Images Example</h1>
   <img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt ="Amit Diwan" class="avatarImage">
   <img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt ="John Smith" class="avatarImage">
</body>
</html>

Create avatar images like a card

The avatar images can be set like a contact card. Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         margin:25px;
      }
      img {
         margin: 5px 10px 1px 5px;
         height: 50px;
         width: 50px;
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <h1>Avatar Images</h1>
   <div class="chip">
      <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909__340.png">
      James Anderson
   </div>
   <div class="chip">
      <img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
      Britney Smith
   </div>
</body>
</html>

AmitDiwan

Updated on: 14-Dec-2023

839 Views

Kickstart Your Career

Get certified by completing the course

Get Started