背景画像:フルスクリーン
背景画像:フルスクリーン
- bodyに背景画像を固定
- background-size: cover;
- background-attachment: fixed;
HTML記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>GIRLY ROP</title> <meta name="viewport" content="width=device-width"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Vujahday+Script&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body id="home"> <div class="container"> <h1>Girly Drop</h1> <p class="wf-sawarabimincho">眺めるだけで、キュンとする♡女の子による女の子な無料写真画像サイト</p> </div><!-- /.container --> </body> </html>
CSS記述例
@charset "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } #home { background-image: url(../img/01.jpg); background-repeat: no-repeat; background-position: left center; background-size: cover; background-attachment: fixed; } .container { width: 80%; height: 100vh; margin: 0 auto; text-align: center; } h1 { color: #FFF; font-size: 3.0em; font-family: 'Vujahday Script', cursive; margin: 100px auto 30px auto; } .wf-sawarabimincho { color: #FFF; font-size: 1.0em; font-family: "Sawarabi Mincho"; font-weight: bold; line-height: 1.5; background: rgba(16, 3, 3, 0.4); padding: 0.8em 1.0em 0.7em; } @media screen and (min-width: 768px){ .wf-sawarabimincho { background: rgba(16, 3, 3, 0); font-size: 1.3em; letter-spacing: .05em; } }