Hellow! im new at this…
Many “html & css pages” have awsome designs, one of them are Images in a circle…
The images are common square… How Can i put neatly a image in it?
An example of my Code~~
i want to put an image in the “div”(division), that its goinf to be a circle.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title>My social web, example..</title>
</head>
<body>
<div> </div>
</body>
</html>
in the CSS Page i put:
div {
display: inline-block;
margin-left: 5px;
width:100px;
height:100px;
border-radius:100%;
border:2px solid #008000;}
i want to put this image in the circle, nicely, like trimming image alike a circle in the circle…
<a href="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg"</a>
How can i do it?
Thanks!
@ricardovm
Try it with
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style>
img {
display: inline-block;
margin-left: 5px;
width:100px;
height:100px;
border-radius:50%;
border:2px solid #008000;}
</style>
<title>My social web, example..</title>
</head>
<body>
<div>
<img src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
</div>
</body>
</html>
1 Like
Woow! Thanks men
But in the case that i want not all images to be circle, what shall i do?
the ‘img’ under the <style>
establish that all images Will be circle…
Now what?
How can i do it?
Thanks Alot for your help.
@ricardovm
In HTML you can expand the HTML-Tag
with so-called attributes
From
we choose
-
class Global attribute Often used with CSS to style elements with common properties.
- If we want to =select= such a HTML-Element
we prepend the used class-name
with a dot _( like .circle_img )
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style>
img {
display: inline-block;
margin-left: 5px;
width:100px;
height:100px;
border-radius: 10%;
border:2px solid #008000;}
.circle_img {
border-radius:50%;}
</style>
<title>My social web, example..</title>
</head>
<body>
<div>
<img class="circle_img"
src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
<img src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
<img class="circle_img"
src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
<img src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
</div>
</body>
</html>
I would suggest you do following course
- https://www.codecademy.com/learn/web
= = = = = = = = = = = = = = = = = = = = = = = = = = = = =
-
HTML & CSS -Course
- HTML Tags and the syntax
- style / class / id attributes
- google search
- html [your question] site:developer.mozilla.org
- html [your question] site:stackoverflow.com
- CSS selectors
- CSS properties and there associated Value’s
- css [your question] site:developer.mozilla.org
- [your question] getbootstrap.com
1 Like
Thank you very much sir 
Greetings!
system
closed
#6
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.