Как перенести изображение, которое в css выполнено как background в html?

Question

[Denwebart]

Здравствуйте! Подскажите, пожалуйста.
Есть шаблон. В шапке шаблона - изображение, сделанное background-ом в css. Мне очень нужно, чтобы само изображение было в вёрстке, чтобы я мог прописывать alt к нему.

Так выглядит блок шаблона, в котором должно быть изображение

<!-- Start Content -->
<section class="content">
    <!-- Start Banner -->
    <div class="banner-outer"> <span class="banner-shadow"></span>
      <div class="banner-image">
        <div class="container">
          <div class="content animated fadeInLeft">
            <h1>Provide Innovative</h1>
            <h2>Construction Solutions</h2>
            <p>Keep the whole family comfortable with building construction. We provide 24/7 emergency water extraction service in Australia.</p>
            <a href="contact-us.html" class="btn">Get a Free Quote</a> </div>
        </div>
      </div>
    </div>
    <!-- End Banner -->

А вот место в CSS, где прописаны для него стили:

.banner-outer .banner-image {
	background: url(../images/banner.jpg) no-repeat center top / cover;
}

P. S. изображение, к сожалению, прикрепить сюда не получается.

Comments

[Rustam Bainazarov]

Можете добавить два атрибута к нужному блоку:
aria-labelledby="ваше описание" + title="ваше описание"

[Rustam Bainazarov]

И при наведении на блок будет такая же штука, как и в случае alt для img, и для screenreader'ов будет полная информация.

[Denwebart]

SmthTo, Дело в том, что мне надо будет ещё натягивать шаблон на CMS. То есть, менеджер будет добавлять любое изображение через поле. Поэтому, мне не подходит, полагаю. Но спасибо большое.

[Rustam Bainazarov]

Denwebart, не понял. Если вы можете добавить поле для заполнения атрибута alt тега img, то что мешает сделать по сути то же самое, но для div'a?

[Rustam Bainazarov]

Denwebart, а alt у img сам по себе не заполнится. Так что поле вам у любом случае нужно.

[Rustam Bainazarov]

Denwebart, вы же путь будете прописывать как в шаблоне? Думаю, вот так, как обычно:

<div class="banner-image" style="background-image: url(#ПУТЬ);">

Чтобы можно уже через CSS управлять только позиционированием, а не самим путём до изображения. Ну вот и добавьте ещё одно поле «описание», контент которого будет идти в эти два атрибута, что я выше написал. А сами атрибуты поставьте хоть в этот блок, хоть в любой иной.

Итого два поля для менеджера: картинка и описание. И всё с текущей HTML-разметкой. Вам только будет нужно убрать из CSS-файла у этого селектора путь до картинки и оставить только свойства размера фона и его позиционирования.

[Denwebart]

SmthTo, Спасибо, завтра попробую. Но, всё же, нельзя ли сделать классически?
<img src="" alt="">

[Rustam Bainazarov]

Denwebart, можно, но зачем? У вас уже есть разметка + вам в любом случае два поля нужно создавать для менеджера. Фон удобнее позиционировать с помощью background'а. Есть, конечно, и object-fit для img, но он не работает в IE и EDGE.

Answer 1

[MeowingMaster]

• вставте в .banner-image, тег img с нужным атрибутом alt, и src = [путь к картинке]
  
• выровняйте картинку в блоке с помощью position: relative;
  
• запретите выделение картинки: pointer-events: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
  
  

Comments

[Denwebart]

Не помогло. Но спасибо. Было принято решение оставить так, как есть.