- 締切済み
HTMLの書き方に就いて
ホームページの初心者の者ですが背景（モミジの葉）の上にVideoを乗せたいのですがVideoの下又は上に成ってしまい背景（モミジの葉）の上にVideoを乗せる事が出来ません、あれこれnetでググって見ても、何としても分からず乗せる事が出来ません。 何方かお分かりの方が居られましたなら是非サンプルhtmlソースを添付を頂きご教示の程を下さればこの上ありません。 念のためにHTMLソース＆画像を添付致しました。
- 0928tiger
- お礼率64% (18/28)
- フリーウェア・フリーソフト
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- heisukewada
- ベストアンサー率58% (93/160)
とりあえず、中央にしてみてはどうでしょう？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>動画ギャラリー</title> <style> body { text-align: center; background: url('./pics/haikei.png') no-repeat center center fixed; background-size: cover; } .video-container { display: inline-block; margin-top: 50px; padding: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; } </style> </head>
- 4017B
- ベストアンサー率73% (1336/1814)
2通りの解決方法があり。1つは… <div class="my_video"> <video id="movie">～</video> </div> ～以上の様にHTMLを修正し、さらに class="my_video" に対してCSS(スタイルシート)を用いて背景画像を適用させます。 もう1つの方法は、同じくCSSを使いますが、適用させる部分をページの背景全体、つまり <body> の部分にCSS(スタイルシート)を用いて背景画像を適用させます。 いずれの場合も、適用させたいHTMLタグの中に… style="background:url(./pics/haikei.png);" ～以上の様なスタイルシート指定を追記して上書き保存した後、ブラウザを再更新させて表示が反映されているかどうか確認します。 具体的には… <body style="background:url(./pics/haikei.png);"> ～みたいな感じで記述します。本来はCSSは、 <style> .my_video { background:url("./pics/haikei.png"); } </style> または… <link rel="stylesheet" href="./my-css/style.css"> ～のようにHTML内に直書きせずに、別途に分けて記述するか、外部ファイルへリンクさせる事が強く推奨されますが…まあ今回はお試しという事で、まずは実験してみてください。 P.S. CSSで画像を指定した場合、Defaultでは同じ画像が繰り返しタイルの様に敷き詰められて全体を埋め尽くすように表示されます。大きな画像を1枚だけポスターみたいに表示させたい場合には、 no-repeat という記述を追記してください。他にもCSSには色々な設定値がありますので、自分のイメージに合うような設定値を試してみてください。 - "CSSリファレンス - background": https://www.htmq.com/style/background.shtml
- WDY
- ベストアンサー率27% (134/487)
body区に背景画像を設定すれば全体に掛かります background-image: url(画像パス); background-repeat: repeat; //画像の繰返し body区に直接指定するか <body style="background-image: url(画像パス);background-repeat: repeat;"> CSSに書くかはお任せします。 body { background-image: url(repeat.png); background-repeat: repeat; }
