laravel 背景画像を固定化させる方法

3720 ワード
Laravel 画像 初心者 HTML CSS HTML テキストリンク

はじめに

  1. 今回、久々にHTML CSSを編集して画像を背景にしたいと思い備忘録で投稿させて頂きます。
  2. 画面をスクロールしても背景は固定化されている。
  3. 背景の大きさは画面一杯に設定します。
  4. Asset関数を使用してフォルダを参照します。
  5. 写真素材はこちらでDLしました。写真AC

HTMLの編集

HTMLとCSSを結びつけるasset関数を記述して下さい。
<link rel="stylesheet" href="{{ asset('css/sample.css') }}">
これをhead内に記述して下さい。

sample.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Sample Title</title>
    <link rel="stylesheet" href="{{ asset('css/sample.css') }}">//これを記述して下さい
</head>
<body>
</body>

Asset関数とは

laravel独自のヘルパ関数の一つです。
画像やCSS、JavaScriptといったリソースデータの読み込みをする際に使います。
極論に言うと、publicフォルダの中を確実に参照させるために使います。
因みに{{}} の意味は、xssの対策です。

CSSの編集

sample.css
body {
  width: 100%;
  height:100vh;
  background-image: url(../images/4317917_m.jpg);  
  background-position: center center; 
  background-repeat: no-repeat;  
  background-attachment: fixed; 
  background-size: cover;
 }

background-imageを使って画像を呼び出し

background-image: url(../images/4317917_m.jpg);
..は一つ上の階層フォルダを参照しているという意味になります。
/images imagesというフォルダ(ＣＳＳと同じ位置に作ったフォルダ)を参照する。
最後に画像の名前をコピペ+拡張子も必ず記述。

background-position: center center

画像を常に上下左右の中央に配置させる。

background-repeat: no-repeat;

画像を繰り返し表示しないようにする。

background-attachment: fixed;

ページなどのコンテンツの高さが画像より大きい場合は自動で調整してくれる。

background-size: cover;

画面、ブラウザのサイズに基づいて、背景画像を調整。
このように画像いっぱいに画面を調整してくれます。以上です。

参考にしたURL

テックアカデミー
背景画像をブラウザいっぱいに表示しているCSS記述方法