/suto3/UserCSS:バックグラウンド

generated at 2/17/2025, 1:15:07 PM
UserCSS:バックグラウンド
背景色の設定
背景画像の設定
背景、バックグラウンド（background）

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:グラデーション
stylexx.cssbody {
  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;
}

固定モード
stylexx.cssbody {
 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;
}

ワイドモード
stylexx.cssbody {
 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%にして算出 */
}

ランダムモード
stylexx.cssbody {
  /*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%にして算出 */
}

stylexx.cssbody {
  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;
}

stylexx.cssbody {
 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%); /* */
 /* background: linear-gradient(red, orange, yellow, green, blue); */
 /* background-color: black; /* */
 /* opacity: 0.5; */
 opacity: 0.9; /* */
 animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  } 
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

UserCSS:background
UserCSS:フォント
UserCSS:背景色 - UserCSS:background-color
UserCSS:背景色のグラデーション
UserCSS:背景画像 - UserCSS:background-image
UserCSS:禅モード
UserCSS:痛モード

Scrapbox:バックグラウンド
HTML5:body要素
CSS3:background

バックグラウンド