SCSS

HTML

<span>Хуитос</span>

<div></div>

<span>Хуитос-буритос</span>

<div></div>

<span style=" font-size: 9px; margin-top: 80px; ">Экстра-хуитос-буритос</span>

<div></div>

<span style=" font-size: 25px; margin-top: 110px; ">Твой хуитос<br>Мой БУРИТОС</span>

SCSS

body {
  background: #000;
}

span {
  margin: 50px;
  position: relative;
  display: inline-block;
  color: #fff;
  text-align: center;
}

span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 2em); /* + 2em -- чтобы было пропорциональное тексту увеличение размера */
  padding-bottom: calc(100% + 2em); /* + 2em -- чтобы было пропорциональное тексту увеличение размера */
  transform: translate(-50%, -50%);
  background: red;
  z-index: -1;
  border-radius: 100%;
}





/************/
span:nth-child(3):before {
  background: url(https://media.makeameme.org/created/nani-5aa6e8.jpg);
  background-size: cover;
}

span:nth-child(5):before {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOTKusHJU6SpFlUoJI0I9n7rrdVPaVYXaO1f5rivWglBpXvQ1J);
  background-size: cover;
}