Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create an Avatar Image with CSS
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>
1K+ Views
