背景画像が表示されない。

Question

前提・実現したいこと

背景画像を表示させようとして次のようにCSSを記述したのですが背景画像が表示されませんでした。

該当のソースコード

welcome.blade.php

@extends('layouts.app')

@section('content')
    <div class="center-jumbotron">
        <div class="text-center">
            <h1>**********</h1>
            <h3>**********</h3>
            <p>{!! link_to_route('signup.get', '新規登録はこちら', [], ['class' => 'btn btn-lg btn-primary']) !!}</p>
        </div>
    </div>
    <style>
        .center-jumbotron{
            background-image:url('sunset.jpg');
            background-size:cover;
        }
    </style>
@endsection

welcome.blade.phpとsunset.jpgはviewフォルダ直下に存在しています。
背景画像が表示されない理由がわからないのでわかる方がいましたら回答よろしくお願いいたします。

Comments

[m.ts10806]

「CSS」の問題であればbladeのコード提示するのは回答者に優しくありません。タグを追加するか、ブラウザに出力されたhtmlを追記しファイルの構成を提示するか
どちらかで対応してください。

Answer 1

とりあえず'sunset.jpg'をhttpから始まるURLに直してみましょう。
（'http://example.com/sunset.jpg'のような、アクセスしたらその画像が見られるURLにしましょう）

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

Comments

[ucchii]

わかりました。ありがとうございます。