Как сделать так, что бы пустые участки блока не заливались свойством background-color?

Question

[JackShcherbakov]

Здравствуйте, коллеги!

Есть страница, на которой пользователь может выбрать тип экскурсии. Но иногда блоки выглядят так:
Как вы могли догадаться, проблема в том, что у блока (h1), который содержит надпись) должен быть фон. Но мне нужно сделать так, что бы заливка была только "под текстом". То есть текст как бы должен быть выделен оранжевым. Пустые участки заголовка не должны быть закрашены. Можно ли как то сделать без дополнительных блоков?

Заранее выражаю огромную благодарность всем, кто поможет

Answer 1

[Dymok]

https://codepen.io/anon/pen/JvpNWe

Answer 2

[Stalker_RED]

.wrapper {
  background: url(https://vgy.me/bHgGYd.png);
  background-size: cover;
  padding: 40% 0 20%;
  text-align: right;
}
h1 {
  display: inline;
  background: tomato;
  font-size: 300%;
}

https://jsfiddle.net/rt2L2z1z/

Comments

[JackShcherbakov]

Точно! Спсасбо большое!