Главная/Статьи/Сделать изображение в блоке фоном jquery
jQuery

Сделать изображение в блоке фоном jquery

Бывает задача: изображение находится внутри блока тегом <img>, а нужно сделать его фоновым изображением этого же блока через background-image. Решается через jQuery.

Решение

Скрипт берёт атрибут src из тега img, устанавливает его как background-image родительского блока и скрывает сам тег изображения:

$('.block').each(function() {
  var imgSrc = $(this).find('img').attr('src');
  if (imgSrc) {
    $(this).css('background-image', 'url(' + imgSrc + ')');
    $(this).find('img').hide();
  }
});

Замените .block на нужный CSS-селектор вашего блока.