Zunaira Zafar Zunaira Zafar - 5 months ago 20
CSS Question

how to draw circle with text in middle and an image as a background of the circle?

I'd like to know that how to draw a circle with text in middle and an image as a background?

This image should be the background of the circle

I have tried to put the image but its not getting the complete background image, only getting a part of image as a background.



#circle {
width: 200px;
height: 200px;
border-radius: 50%;
font-size: 50px;
color: #2098D1;
line-height: 200px;
text-align: center;
background-image: url("http://7bna.net/images/background-wallpapers/background-wallpapers-9.jpg");
}

<div id="circle"> Hello </div>





ww.intrawallpaper.com/static/images/abstract-mosaic-background.png

Answer Source

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-size: 50px;
  color: #2098D1;
  line-height: 200px;
  text-align: center;
  background-image: url("http://intrawallpaper.com/static/images/abstract-mosaic-background.png");
  background-size: 150% 150%;
  background-repeat: no-repeat;
  background-position: 97% 75%;
}
<div id="circle"> Hello </div>

You can use background-position to adjust the background display area.

Learn more about it here.

Alternatively, you can use background-size: contain combine with background-position: center.