css - CSS 失敗 - background-position、background-repeat、background-size、background-attachment

Question

div以下をmainの a に入れるとbody、これは機能します:

<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">

しかし、私がCSSを使用するときは機能しません:

<style type="text/css" media="all">
.myMainDiv {
    width:100%;
    height: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
</style>

<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">

背景ごとに異なる写真が必要なため、うまくいかないようです。これにより、background-repeatなどが無視されます。(注: また、異なる div は異なる表示値 (ブロックまたはなし) を持つため、それらも別々に記述する必要がありますが、それは問題ではありません。)

理由と回避策があるかどうかは誰でも知っています。