commit 830316955d7fd7a232bcafb130404206f96acd51 parent 16ef3f38c4fc2aaf0b2913dbd9fdebbed5a53178 Author: Matsuda Kenji <info@mtkn.jp> Date: Wed, 8 Apr 2026 18:34:57 +0900 add bg_scroll Diffstat:
| A | content/computer/web_design/bg_scroll.html | | | 46 | ++++++++++++++++++++++++++++++++++++++++++++++ |
| A | content/computer/web_design/bg_scroll.svg | | | 15 | +++++++++++++++ |
2 files changed, 61 insertions(+), 0 deletions(-)
diff --git a/content/computer/web_design/bg_scroll.html b/content/computer/web_design/bg_scroll.html @@ -0,0 +1,46 @@ ++++ +date = '2026-03-21T13:46:00+09:00' +draft = false +title = 'BG Scroll' ++++ +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<title>BG Scroll</title> +<style> +body { + margin: 0; +} +#initial-page { + height: 100vh; + background-color: #eaffea; + text-align: center; + align-content: center; +} +#bg { + position: fixed; + left: 0; + top: 50%; + width: 100%; + object-fit: fill; + z-index: -1; +} +#gap { + height: 400px; +} +#bottom-page { + height: 100vh; + background-color: #eaeaff; +} +</style> +</head> +<body> + <div id="initial-page"> + scroll down + </div> + <img id="bg" src="bg_scroll.svg" alt="bg svg"> + <div id="gap"> + </div> + <div id="bottom-page"> + </div> +</body> diff --git a/content/computer/web_design/bg_scroll.svg b/content/computer/web_design/bg_scroll.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + width="1000" height="400" + viewBox="0 0 1000 400" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="blue" /> + <stop offset="100%" stop-color="green" /> + </linearGradient> + </defs> + <rect x="0" y="0" width="1000" height="400" fill="url(#grad)" /> +</svg>
