menu

information css

HOMEcss パララックス&親要素を無視して幅100%

2020年09月15日

パララックス&親要素を無視して幅100%

基本的にコーディングをするとき、.containerや.mainのdivで囲み、そのdiv要素はwidth1000pxとかに設定しますよね。
でも一部だけその要素を突き抜けてブラウザ幅いっぱいに表示したくなるときがあります。

そんなときのcssがこれ。

width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

親要素無視のcssにパララックスを追加&背景の上に透過の画像を載せると。

.parallax{
    width: 100vw; /*親要素を無視してブラウザ幅100%で表示*/
    left: 50%; /*親要素を無視してブラウザ幅100%で表示*/
    right: 50%; /*親要素を無視してブラウザ幅100%で表示*/
    margin-left: -50vw; /*親要素を無視してブラウザ幅100%で表示*/
    margin-right: -50vw; /*親要素を無視してブラウザ幅100%で表示*/
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 300px;
}
.parallax::before {
    /* 透過した黒ドットを画像の上に重ねる */
  background-image: url(../img/bg-dot-b01.png);
    background-color: rgba(0, 0, 0, 0.5);
    /* どの範囲に重ねるかを指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    z-index: 0;
}

.images{
    background-image: url(背景画像);
}

会社案内はこちら

〒410-0822
静岡県沼津市下香貫宮脇200-3

055-935-1339

営業時間 9:00~18:00

お問い合わせ