Реально ли тег превратить в css background?

Question

[Дмитрий Камянной]

Вопрос наверное тупейший , простите. Задался им вчера.

Например : В CMS-ке вы выводим новость в определенный блок , картинка у нас определенным полем и выводится ествественно тегом img. Как вариант можно с помощью JQ вытянуть тег и переместить его в родительский блок, а далее путем манипуляций с абсолютным позиционированием можно растянуть и з-индексом поставить на задний план.

А вот можно ли как то взять этот тег img и скрыть его, а сам путь к картинке взять с помощью jq или чистого js и в реальном времени добавлять его как параметр background: url () в нужном селекторе ?

Спасибо большое, надеюсь внятно обьясниь, а то зная зная себя я могу иногда нести такие что только сам это и пойму =)

Answer 1

[Станислав]

jsfiddle.net/535f2yyj
или
jsfiddle.net/wgywpj34

Comments

[Дмитрий Камянной]

Спасибо большое ) то что нужно.

Answer 2

[Оптимус Пьян]

Цель, смысл объясните действия. Картинку хотите что бы никто не скачал (путь не определил)?

Comments

[Дмитрий Камянной]

Я делаю шапку для сайта, а сама шапка в виде слайдера. Изображение на заднем фоне , а контент ноды/новости за переднем. Цель тут в том что с помощью background намного легче и позиционировать и нормальный размер задать.

Answer 3

[Иван Беленков]

А что у вас за CMS? Если я правильно понял задачу, то проще сразу url картинки класть не в тег img, а в атрибут style необходимого блока. Т.е. прям в шаблоне выводить:

Неверно:
<div class='news-item'>
    <img src={url} />
    <!-- тело новости -->
</div>
Верно
<div class='news-item' style='background-image: url("' + {url} +'");'>
    <!-- тело новости -->
</div>

Также, для управления позиционированием изображения(не бэкграунда), есть неплохое css свойство object-fit:
https://developer.mozilla.org/en-US/docs/Web/CSS/o...
И полифилл к нему(поддержка IE9+):
https://github.com/anselmh/object-fit

Answer 4

[Евгений Перин]

Какая CMS? Во многих можно получить именно путь миниатюры а дальше уже вставить в бэкграунд