LaravelでWebサービスを作成しており、bootstrapのjumbotronの背景にcssで背景画像を設定しようとするのですが上手くいきません。
使用しているツールのバージョン
laravel 5.5 bootstrap4.3 CSS3
laravelのフォルダ構成は以下です。
public css style.css images 背景画像.jpg
style.css
@charset "utf-8"; .jumbotron { background-image: url('../images/背景画像.jpg'); background-size: cover; }
app.blade.php
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> // CSS読み込み場所 <link rel="stylesheet" href="{{ asset('css/style.css') }}"> <title>~~~~</title> </head> <body> @include('commons.navbar') <div class="container"> @include('commons.error_messages') @yield('content') </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
webpack.mix.jsに関係していると思い、以下のコードを記述したのですが、背景画像を表示できませんでした。
webpack.mix.js
mix.sass('src/sass/app.scss', 'public/css/').options({ processCssUrls: false });
以上わかるかたいましたらよろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。