HomeОбразованиеRelated VideosMore From: zFunx Web Developement Ideas

How to make Responsive Oval / Circle using DIV and CSS

57 ratings | 8283 views
CSS used : .circle{ background-image:url("yourImage.png"); width:50%; border-radius:50%; border:2px solid #000; box-shadow:0 0 10px #000; } .circle:after{ content:""; padding-bottom:100%; display:block; } Image used : http://4.bp.blogspot.com/-0H3_WCM-j18/UfVc4YIheyI/AAAAAAAAArM/5j--KBDa_90/s640/Free+download+Natural+Wallpaper+background+Green+Nature+with+sunrise+wallpaper.png About me : https://www.youtube.com/c/zfunx/about
Html code for embedding videos on your blog
Text Comments (11)
DarkMan (5 months ago)
amazing !
Eliud C. Delgado (8 months ago)
Nice technique. You can set height and width to the same amount using viewport units (vh, based on the viewport height or vw, based on its width) to achieve the same responsive effect without the pseudoelement. It doesn't work on IE but you can still use this as a fallback.
LVjp (11 months ago)
You're best in the world!
Fay schouten (11 months ago)
My html:<!DOCTYPE HTML><html>    <title>test</title>     <div class="circle"></div>    </html>my live preview doesn't work I only see a white page :(My ccs: .circle {     background-color: red;     width: 40px;     height: 40px;     border-radius: 50%; }
Fay schouten (11 months ago)
weird :( Idk what happend. Thanks for the video btw! :D
Dunno, but the following code worked : <!DOCTYPE html> <html> <head> <title>test</title> <style> .circle { background-color: red; width: 40px; height: 40px; border-radius: 50%; } </style> </head> <body> <div class="circle"></div> </body> </html>
Cavidan Əkbərov (1 year ago)
bro thanks
Unfunctional (1 year ago)
hi, how do u resize the image within this circle? thanks
Add " background-size:cover; " to circle class. Learn more about background-size property : https://www.w3schools.com/cssref/css3_pr_background-size.asp
Igor Semenuk (1 year ago)
I've learnt what I was looking for. Thank you.
Aminul islam (1 year ago)
Thanks a lot brother.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.