How to display 'fit' image in CSS or HTML? - html

Question

I have a circular thing going on for my website (amitnkalra.github.io)
My image seems to be to big for this? How do I make this smaller and still show the same part of the image that it's showing right now.
I have the following code :
.profile {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(img/Avatar.jpg) no-repeat;
width: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
height: 200px;
}
Also, my social media icons aren't displaying, they're clickable, but the icons don't show-up, why is that?
Here's the code for that:
.Twitter {
width: 25px;
height: 25px;
background: url(img/Twitter.png);
margin: auto;
display: inline-block;
}

Answer 1

Your divs are way smaller (25x25) than your background images, so you're only seeing fractions of them. In order to fit them you can use:
background-size: 100%;
on all the elements that have social images set as backgrounds.
Ideally, in order to optimize the website performance and safe some bandwidth, you'd shrink those images down to 25x25 pixels (unless you use the big versions elsewhere).

Answer 2

body {
text-align:center;
}
.profilePicture {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background-image: url(http://amitnkalra.github.io/img/anotherAvatar.jpg);
background-size: cover;
background-position: 45px top;
width: 200px;
height: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
}
.Twitter {
display: inline-block;
width: 50px;
height: 50px;
margin: auto;
}
.Twitter img {
height: 100%;
width: 100%;
}
<div class="profilePicture"></div>
<div class="Twitter"><img src="http://amitnkalra.github.io/img/Twitter.png" /></div>
The body css is not neccessary. I added it just to center the .Twitter
I used background-size: cover to ensure both width and height of the image fits the div and move the image to the left a bit by using background-position.