This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites.
Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radius to 50%.
Example:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< style >
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.avatar-container {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
}
</ style >
< title >
Create Avatar Images
using HTML and CSS
</ title >
</ head >
< body >
< div class = "avatar-container" >
< div class = "avatar" >
< img src =
alt = "GFG Logo" >
</ div >
</ div >
</ body >
</ html >
|
Output: