Как сделать div фонового изображения отзывчивым

Как реагировать на это изображение

HTML:

<section id="first" class="story" data-speed="8" data-type="background">
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>

CSS

#first .smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;}

Ответы

Ответ 1

Используйте свойство background-size для значения 100% auto для достижения того, что вы ищете.

Для экземпляра

#first .smashinglogo{
   background-size:100% auto;
}

Надеюсь, что это поможет.

PS: В соответствии с вашим кодом выше вы можете удалить fixed и добавить 100% auto для достижения результата.

Ответ 2

Попробуйте добавить background-size:cover

.smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;
  background-size: cover;
  height:600px
}

Подробную статью можно найти этот учебник.

Ответ 3

Вместо фиксированного использования

макс-ширина: 100%;

это будет работать.

Конечный результат

.smashinglogo {
  background: url(../images/logo1.png)  50% 100px no-repeat;
  max-width: 100%;
}

Ответ 4

попробуйте следующее:

background-size:100% auto;

или

background-size: cover;

Ответ 5

Я просто подытоживаю ответ, который помог мне в том же духе.

.smashinglogo {
  max-width: 100%;
background-size:100% auto;
}

.smashinglogo {
  max-width: 100%;
background-size:cover;
}

Оба вышеуказанных кода работали очень хорошо.

Ответ 6

#first .smashinglogo{
 background-image: url(../images/logo1.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 50% 50%;
}

попробуйте это, это может сработать для вас.

Ответ 7

Создание отзывчивого изображения существует много способов.

В основном правиле используется значение % вместо значения pixel. а второй - использование @media queries для таргетинга мобильных устройств и планшетов.

Также вы можете использовать новую технику CSS3, чтобы сделать изображение отзывчивым:

.img-element: {url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

вы можете узнать больше о отзывчивом изображении, нажав на эту ссылку. http://css-tricks.com/which-responsive-images-solution-should-you-use/

Ответ 8

Если вы удаляете фоновое изображение при укладке на небольшие устройства (обычно ниже 577 пикселей в ширину), добавьте "min-height: 310px;" к вашему css.