How to Create Avatar Images using HTML and CSS ?
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 = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" alt = "GFG Logo" > </ div > </ div > </ body > </ html > |
Output: