Добавление фонового изображения в шаблон лезвия на основе начальной загрузки - PullRequest
Новая
       26

Добавление фонового изображения в шаблон лезвия на основе начальной загрузки

0 голосов
/ 08 ноября 2019

У меня есть приложение laravel.

Я использую начальный загрузчик во внешнем интерфейсе вместе с шаблонами лезвий.

Я хочу добавить фоновое изображение на свою целевую страницу.

Я пытаюсь стилизовать страницу, помещая фоновое изображение в тело. Но он не работает, так как на изображении не отображается

Ниже приведен мой код 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>

</head>
<style>
body {
 background-image: {{url('/images/gym_background.jpg')}};
}
</style>
<body>
@include('partials.header')
<div class="container">
    @yield('content')
</div>
</body>
</html>

В консоли My Chrome я не вижу ошибки не загрузки изображения.

Код для раздела контента 

    @extends('layouts.master')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <h3>Welcome to your neighourbood Gym</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <h1 class="post-title">Plans</h1>
            <p>Plans available in our gym!</p>
            <p><a href="{{ route('blog.plans', ['id' => 1]) }}">Click to view</a></p>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12 text-center">
            <h1 class="post-title">Gallery</h1>
            <p>Have a look around our gym</p>
            <p><a href="{{ route('blog.post', ['id' => 2]) }}">Click to view</a></p>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12 text-center">
            <h1 class="post-title">Contact us</h1>
            <p><a href="{{ route('contact.create') }}">Click for more details</a></p>
        </div>
    </div>
@endsection

С наилучшими пожеланиями,

Саурав

Ответы [ 2 ]

0 голосов
/ 09 ноября 2019

Учитывая следующую структуру папок: 

`/public/images/gym_background.jpg`

Измените это: 

<style>
body {
 background-image: {{url('/images/gym_background.jpg')}};
}
</style>

На это: 

<style>
body {

 // Add a . in front to look in the right folder + dropping the double {{ }}
 background-image: url('./images/gym_background.jpg');

}
</style>

Вот хорошее прочтение на Относительные и абсолютные пути для сверх любопытных.

0 голосов
/ 08 ноября 2019

Если вы не видите изображение и в инспекторе сетей нет ошибки 404, то, вероятно, ваше изображение скрыто под каким-то другим элементом, который занимает весь экран и имеет сплошной (белый?) Фон. Попробуйте установить тот же CSS на div.container, тогда он должен работать.

UPD: поцарапайте, проблема в фигурных скобках. Это сработает, если вы удалите эти {{и}}.

...