Как разместить картинку через background, при этом она должна быть по центру и вверху текста?

Question

[inzor]

Вот мой код:

Вот что нужно сделать:

Comments

[Ankhena]

Если размер картинки известен, то просто сделать padding-top для блока.

Но надежнее псевдоэлементом.

[iBird Rose]

а зачем ее размещать через background, если правильным решением будет вставить туда через тег img?

[Maxim Kirshin]

iBird Rose, возможно потому что это декоративное изображение, не контентное, хотя обычно на это все забивают, да))

[iBird Rose]

Maxim Kirshin, окей. тогда можно создать что то типа <i class="icon-time"></i>
и для него уже задать и размеры и background

[Maxim Kirshin]

iBird Rose, тогда будут ругаться адепты семантики))

[iBird Rose]

Maxim Kirshin, никогда не слышал, чтобы на такое кто-то ругался. учитывая, что все сервисы шрифтовых и прочих иконок используют именно такой способ через тег i

[inzor]

Ankhena, Супер!!! Огромное Вам спасибо!

[Ankhena]

iBird Rose, я ругаюсь на лишние теги в разметке. Особенно пустые. За редким исключением, когда картинки добавляются CMS и по-другому ну прям совсем никак.

Это украшение и, по-хорошему, место ему в стилях. Фоном и/или псевдоэлементом.

[iBird Rose]

Ankhena, ты сейчас серьезно решил докопаться до тега иконок? окей. давай смоделируем ситуацию: сверстал ты такую иконку через псевдоэлемент и все это натянулось развернулось и работает. клиент хочет этот блок изменить и там уже будут не часы, а что-то другое. в моем варианте он туда через тег i сможет вставить любую иконку, которая есть в проекте (потому что я все иконки по такому принципу бы сделал) и плюс он сможет подключить любой сервис иконкок по типу fontawesome и добавить иконку оттуда. и все это без единого изменения в css (а нынче даже обычное изменение в css влечет за собой перебилд вебпаков, галпов и прочего).
p.s. это я чисто обосновал свое решение применять иконки именно таким способом, если что.

[Ankhena]

iBird Rose, я же специально написала выше про исключения.

Если иконка не в спрайте, то решается заменой картинки. Хотя это тоже способ не фонтан.

А если в спрайте, то это всё равно пересборка.

Если клиент сам будет подключать fontawesome и менять классы иконкам, ему придётся лезть в разметку.

Положа руку на сердце, вообще не люблю, когда клиенты что-то делают сами.

--

Есть компромиссный вариант - это aria-hidden для картинки или для i, как это обычно делается с fontawesome.

Но спорить тут особо не о чем, есть идеальные условия и есть варианты решения конкретной задачи в условиях ТЗ.

Answer 1

[iBird Rose]

лучше делай так:

Answer 2

[Maxim Kirshin]

через псевдоэлемент ::before, либо просто тег в разметку добавить и его стилизовать