バックグラウンド

このページの基本カラー

:root {
 --main-color: #133967;
 --sub-color: #C4C4C4;
}

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

HTML

<div class="bg01">
 <div class="inner">
  <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 </div> 
</div>

CSS

.bg01{
    background: url(../img/common/bg01.webp) center/cover no-repeat #ccc;
    position: relative;
    z-index: 0;
}
 
.bg01:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: -1;
}

詳細