Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to 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.
Syntax
.avatar {
border-radius: 50%;
width: value;
height: value;
}
Method 1: Basic Circular Avatar
The images are placed just like any other image using the <img> element. A class is set for both images so that we can style them as avatars −
<!DOCTYPE html>
<html>
<head>
<style>
.avatarImage {
vertical-align: middle;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #007bff;
margin: 10px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Team Members</h2>
<img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=400" alt="John Smith" class="avatarImage">
<img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=400" alt="Jane Doe" class="avatarImage">
</body>
</html>
Two circular avatar images with blue borders appear side by side, showing team member profile pictures.
Method 2: Avatar Cards with Names
Avatar images can be styled like contact cards with names displayed alongside −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 25px;
}
.chip {
display: inline-block;
padding: 8px 16px;
background-color: #f1f1f1;
border-radius: 25px;
margin: 5px;
align-items: center;
}
.chip img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Contact List</h2>
<div class="chip">
<img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=400" alt="James">
James Anderson
</div>
<div class="chip">
<img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=400" alt="Britney">
Britney Smith
</div>
</body>
</html>
Rounded chip-style cards with small circular avatar images and names, displayed with a light gray background.
Method 3: Large Profile Avatar
For profile pages, larger avatar images with hover effects work well −
<!DOCTYPE html>
<html>
<head>
<style>
.profile-avatar {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #e0e0e0;
object-fit: cover;
transition: transform 0.3s ease;
display: block;
margin: 20px auto;
}
.profile-avatar:hover {
transform: scale(1.05);
border-color: #007bff;
}
.profile-info {
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="profile-info">
<img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=400" alt="Profile" class="profile-avatar">
<h3>Alex Johnson</h3>
<p>Web Developer</p>
</div>
</body>
</html>
A large centered circular avatar with profile information below. The image scales up slightly and the border changes color on hover.
Key Properties
| Property | Purpose | Common Value |
|---|---|---|
border-radius |
Creates circular shape | 50% |
object-fit |
Maintains aspect ratio | cover |
width/height |
Controls avatar size | Equal values |
Conclusion
Creating avatar images with CSS is simple using border-radius: 50% to make images circular. Combine with object-fit: cover to ensure proper image scaling and maintain consistent circular shapes across different image dimensions.
1K+ Views
