How can I fill the entire image into a span that is small?

Question

I'm working on a project where clicking a button will generate a random span(in a form of a circle) that blinks on a webpage. The problem is that I'm trying to set the background image of span to be a local .jpg file, and only a tiny bit of the image fills the span.

Only the dog ear is populated

My css looks like this:

.blinkyDancer{
  background: url(../xyz/dog.png);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  position: absolute;
}

What can I do to make the whole dog's face filled into that span background?

Answer 1

You can change the background image size using background-size css attribute.

background-size: 100% 100%;

Answer 2

you should add background-size. it could be contain or cover check what is better.

.blinkyDancer{
  background: url(../xyz/dog.png);
  background-size:contain;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  position: absolute;
}

Answer 3

You've specified the size of the element, but not the size of the image itself. Add this to your css:

  background-size: 90px 90px;

Answer 4

You could also resize the image to meet the requirements, there are many free sites you can use