UserCSS:バックグラウンド

背景色の設定

背景画像の設定

背景、バックグラウンド（background）

code:style.css

:root {

--main-color: DarkGray; /* 主調色 */

--assort-color: White; /* 従属色 */

--base-color: WhiteSmoke; /* 背景色 */

--accent-color: BlueViolet; /* 強調色 */

/* 3 背景画像 */

/* --project-bg-image: url("https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png"); /* ビーバー君 */

--project-bg-image: url("https://season-freeillust.com/img/spring-haikei/04.jpg"); /* */

}

グラデーションモード（画像は表示しない）

UserCSS:グラデーション

code:stylexx.css

body {

background:

linear-gradient(to top,

var(--main-color, blue),

var(--base-color, cyan),

var(--assort-color, darkblue),

var(--base-color, cyan),

var(--main-color, blue)

);

background-repeat: no-repeat; /* */

background-attachment: fixed; /* */

background-position: right bottom ; /* */

background-size: auto 100%, auto,auto;

}

固定モード

code:stylexx.css

body {

background:

var(--project-bg-image),

linear-gradient(to top,

var(--main-color, blue),

var(--base-color, cyan),

var(--assort-color, darkblue),

var(--base-color, cyan),

var(--main-color, blue)

);

background-repeat: no-repeat; /* */

background-attachment: fixed; /* */

background-position: right bottom ; /* */

background-size: auto 100%, auto,auto;

}

ワイドモード

code:stylexx.css

body {

background-image:

var(--project-bg-image),

linear-gradient(to right,

var(--main-color, blue),

var(--base-color, cyan),

var(--assort-color, darkblue),

var(--base-color, cyan),

var(--main-color, blue)

);

background-repeat: repeat-y;

background-attachment: scroll;

background-position: center top ;

background-size: 100% auto; /* 横幅を100%にして算出 */

}

ランダムモード

code:stylexx.css

body {

/*background: url('https://source.unsplash.com/random'); /* */

/*background: url('https://source.unsplash.com/featured/?dog,cat'); /* */

background: url('https://source.unsplash.com/featured/?rose-image'); /* 薔薇 */

/* background: url('https://source.unsplash.com/featured/?Japanese-morning-glory'); /* 朝顔 */

/* background: url('https://dog.ceo/api/breeds/image/random'); /* dog */

/* background: url('https://gyazo-randomizer.herokuapp.com/random/51abd733329db8f65a26e040f70ffda3'); /* gyazo */

/* background-size: cover; */

background-size: 100% auto; /* 横幅を100%にして算出 */

}

code:stylexx.css

body {

background-color: var(--body-bg);

background-image:

radial-gradient(circle at 100% 150%, var(--card-bg,silver) 24%, var(--body-bg,white) 24%, var(--body-bg,white) 28%, var(--card-bg,silver) 28%, var(--card-bg,silver) 36%, var(--body-bg,white) 36%, var(--body-bg,white) 40%, transparent 40%, transparent),

radial-gradient(circle at 0 150%, var(--card-bg,silver) 24%, var(--body-bg,white) 24%, var(--body-bg,white) 28%, var(--card-bg,silver) 28%, var(--card-bg,silver) 36%, var(--body-bg,white) 36%, var(--body-bg,white) 40%, transparent 40%, transparent),

radial-gradient(circle at 50% 100%, var(--body-bg,white) 10%, var(--card-bg,silver) 10%, var(--card-bg,silver) 23%, var(--body-bg,white) 23%, var(--body-bg,white) 30%, var(--card-bg,silver) 30%, var(--card-bg,silver) 43%, var(--body-bg,white) 43%, var(--body-bg,white) 50%, var(--card-bg,silver) 50%, var(--card-bg,silver) 63%, var(--body-bg,white) 63%, var(--body-bg,white) 71%, transparent 71%, transparent),

radial-gradient(circle at 100% 50%, var(--body-bg,white) 5%, var(--card-bg,silver) 5%, var(--card-bg,silver) 15%, var(--body-bg,white) 15%, var(--body-bg,white) 20%, var(--card-bg,silver) 20%, var(--card-bg,silver) 29%, var(--body-bg,white) 29%, var(--body-bg,white) 34%, var(--card-bg,silver) 34%, var(--card-bg,silver) 44%, var(--body-bg,white) 44%, var(--body-bg,white) 49%, transparent 49%, transparent),

radial-gradient(circle at 0 50%, var(--body-bg,white) 5%, var(--card-bg,silver) 5%, var(--card-bg,silver) 15%, var(--body-bg,white) 15%, var(--body-bg,white) 20%, var(--card-bg,silver) 20%, var(--card-bg,silver) 29%, var(--body-bg,white) 29%, var(--body-bg,white) 34%, var(--card-bg,silver) 34%, var(--card-bg,silver) 44%, var(--body-bg,white) 44%, var(--body-bg,white) 49%, transparent 49%, transparent);

background-size: 100px 50px;

}

code:stylexx.css

body {

position: absolute;

top: 0;

left: 0;

z-index: 1;

width: 100%;

height: 100%;

/* background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%); */

/* background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%); /* */