CSSで背景パターン

プレビューイメージ

<!-- HTMLファイル -->

<div class="shippou_bg01">CSSで背景パターン</div>

/* * * cssファイル * * */

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.shippou_bg01 {
    background-color: #FFF999;
    background-image: 
        radial-gradient(circle at top left, transparent 0%, transparent 33.5%,
            #c7d0d4 33.5%, #c7d0d4 36%, transparent 36%),
        radial-gradient(circle at top right, transparent 0%, transparent 33.5%,
            #c7d0d4 33.5%, #c7d0d4 36%, transparent 36%),
        radial-gradient(circle at bottom left, transparent 0%, transparent 33.5%,
            #c7d0d4 33.5%, #c7d0d4 36%, transparent 36%),
        radial-gradient(circle at bottom right, transparent 0%, transparent 33.5%,
            #c7d0d4 33.5%, #c7d0d4 36%, transparent 36%),
        radial-gradient(circle at center, transparent 0%, transparent 67%,
            #c7d0d4 67%, #c7d0d4 72%, transparent 72%);
    background-position: center;
    background-repeat: repeat;
    background-size: 2em 2em;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 22px;
}

CodePenで確認する

プレビューイメージ

<!-- HTMLファイル -->

<div class="shippou_bg02">CSSで背景パターン</div>

/* * * cssファイル * * */

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.shippou_bg02 {
    background-color: #c7d0d4;
    background-image: 
        radial-gradient(circle at center, transparent 69.5%, #c7d0d4 69.5%),
        radial-gradient(circle at top left, #FFF999 34.75%, transparent 34.75%),
        radial-gradient(circle at top right, #FFF999 34.75%, transparent 34.75%),
        radial-gradient(circle at bottom right, #FFF999 34.75%, transparent 34.75%),
        radial-gradient(circle at bottom left, #FFF999 34.75%, transparent 34.75%);
    background-position: center;
    background-repeat: repeat;
    background-size: 2em 2em;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 22px;
}

CodePenで確認する