Css не работает background-size?

Question

[i_m]

Проблема такова
есть определенный блок, которому подставляется фоновое изображение через переменную в

style="background:url(bg.png) top center no-repeat;"

в этом блоке для пк фон отображается нормально
но для мобилок через медиа в файл style.css хочу задать другие размеры блоку и растянуть по нему фон, и прописываю background-size
но этот параметр не реагирует

<?php foreach ($banners as $banner) { ?>
<a href="<?php echo $banner['link']; ?>" class="bannerslide" style="background:url('<?php echo $banner['image']; ?>') top center no-repeat; ">
</a>
<?php } ?>

@media screen and (max-width: 768px) {
.bannerslide{
    height:200px; 
    width: 100%;
    display: block;
    background-size: cover;
}
}

т.е background-size
вообще не реагирует

Comments

[Ankhena]

Подставляйте только путь к изображению.
А всё остальное пишите в css.
Инлайновые стили имеют больший приоритет и перебиваются important'ом, которого хорошо бы избегать, если есть другой путь. А у вас он есть.

Answer 1

[Danny Arty]

Покажите как вы прописываете все это в CSS. Ничего не видя тяжело дать подсказку

Comments

[i_m]

<?php foreach ($banners as $banner) { ?>
<a href="<?php echo $banner['link']; ?>" class="bannerslide" style="background:url('<?php echo $banner['image']; ?>') top center no-repeat; ">
</a>
<?php } ?>

@media screen and (max-width: 768px) {
.bannerslide{
    height:200px; 
    width: 100%;
    display: block;
    background-size: cover;
}
}

т.е background-size
вообще не реагирует

[Danny Arty]

imandrey, вы блоку прописываете инлайновый стиль background и он будет иметь приоритет выше, чем стиль, заданный в css-файле. Оставьте в инлайне только background-url, а остальные параметры (position, size, repeat) пропишите в css-файле для различных размеров экрана.

[i_m]

Danny Arty,
чем собственно плохо указывать импортант?

[Danny Arty]

imandrey, imporant не есть плохо, просто его используют неправильно.
В данной задаче есть вариант решения без него и, при этом, он несложный - так будет правильнее.
Imporant следует использовать тогда, когда нет других вариантов решения, либо они сложные и грозятся усложнить код. А не тогда, когда не охота писать пару лишних строк или разбираться в своем коде.

Answer 2

[i_m]

Вопрос снят
по какой причине работал не в курсе, стили заданы не были
добавил !important
и заработало

Comments

[Антон Литвиненко]

По той причине, что инлайн стили имеют выше приоритет