CSS медиа-запрос не отображает другое фоновое изображение - PullRequest
Новая
       49

CSS медиа-запрос не отображает другое фоновое изображение

0 голосов
/ 03 мая 2020

В моем проекте MVC в _MainLayout.cshtml есть следующее:

<meta name="viewport" content="width=device-width, initial-scale=1">

В моем BundleConfig.cs есть следующий раздел css: 

            bundles.Add(new StyleBundle("~/styles/others").Include(
                "~/css/image.css",
                "~/css/icon.css",
                "~/css/style.css",
                "~/css/responsive.css"
                ));

Они загружаются в файл _MainLayout

Мой index.cshtml файл содержит: 

<div>
    <div class="wrapper">
        <section id="banner" class="mainBg">
            <div class="container">
             ..........

Последние строки моего responsive.css файла: 

@media (min-width: 320px) and (max-width: 479px) {
    .mainBG {
        background-image: url('../img/images/smallBannerImage.jpg') ;
/* background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url('../img/images/smallBannerImage.jpg'); */
        background-size: 100%;
    }
}

(закомментированная строка тоже не работает) (я также скопировал вышеупомянутые строки в конец моего style.css файла, просто чтобы убедиться, что он там не переопределяется)

На начало моего responsive.css файла У меня есть следующее: 

@media (min-width: 320px) and (max-width: 479px) {
    .mainBG {
        background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url('../img/images/smallBannerImage.jpg') no-repeat center center fixed !important;
        background-size: auto;
        background-repeat: no-repeat;
    }
    #banner {
        text-align: center;
    }  
}

Когда я проверяю инструменты разработчика, единственная часть, которая появляется при проверке баннера, это text-align: center

В моем styles.css file устанавливается следующее (это изображение, которое отображается, независимо от того, какой размер я установил в окне просмотра в инструментах разработчика) 

#banner {
    background-position: top;
    background-attachment: fixed;
    background-color: transparent;
    background-size: cover;
    padding: 250px 0;
    position: relative;
}

.mainBg {
    background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url('../img/images/mainBannerImage.jpg');
    background-position: top;
    background-attachment: fixed;
    background-color: transparent;
    background-size: cover;
    padding: 250px 0;
    position: relative;
}

С вышеуказанной информацией (или больше, чем я могу) предоставить) - может кто-нибудь сказать мне, почему фоновое изображение не меняется, когда я меняю размер области просмотра дисплея?

Спасибо.

...