1

応答性を維持しながら、ラッパー要素の背景画像をグリッドを超えて拡張することは可能ですか?

ボックス シャドウ テクニックを使用して単色でそれを行うことはできますが、背景画像をグリッドから抜け出すことができませんでした。

最大幅が 1140px で、列を浮動させる 12 列の柔軟なパーセンテージ ベースのグリッドを使用しています。ラッピング要素の背景画像を設定すると、要素に絶対幅 (150% など) を指定しない限り、最終的に 1140px になります。

私のレイアウトはシンプルで、このようなものです

<body>
    <container>
        <header></header>
        <inner-content>
            <grid-element-one></div>
            <bg-wrap>
                <grid-element-two></div>
            </div>
            <grid-element-three></div>
        </inner-content>
        <footer></footer>
    </container>
</body>

そして、背景画像を表示するために必要な要素が他のグリッド セクションの間にある場所に配置されます。したがって、フッターなどの上に配置して、影響を受ける前にグリッドを終了させることはできません。

CSSも必要最小限です。

.inner-content {
    max-width: 1140px; /* when 768px+, otherwise 96% */
}
.element-two {
    color: $font-color;
    background-color: $bg-gray;
    box-shadow: -25rem 0 0 $bg-gray, 25rem 0 0 $bg-gray;
    height: 475px;
}
.bg-wrap {
    background: url(../images/bg/texture.png) 0 80px repeat;            
}
4

1 に答える 1