Фоновая настройка фонового изображения в колбе - PullRequest
0 голосов
/ 14 ноября 2018

Ребята, я знаю, что есть много ответов на этот вопрос, но у меня это не сработало. Я пытался указать URL в инициализации приложения, но все еще не мог сработать для меня. Я что-то упустил? Я пытаюсь изменить фон на изображение

вот мой каталог

└── wine
    ├── __init__.py
    ├── __init__.pyc
    ├── __pycache__
    │   ├── __init__.cpython-37.pyc
    │   ├── models.cpython-37.pyc
    │   └── routes.cpython-37.pyc
    ├── models.py
    ├── routes.py
    ├── site.db
    ├── static
    │   ├── bg.jpeg
    │   ├── main.css
    │   ├── pexels-photo-935240.jpeg
    │   ├── pexels-photo.jpg
    │   └── sf.jpg
    └── templates
        ├── index.html
        └── rec.html

вот мой html-файл, который я установил материализовать для колбы.

    {% extends "material/base.html" %}
{% import "material/wtf.html" as wtf %}
<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
    {% block title %}
    Welcome
    {% endblock %}
</head>

{% block content %}

<div class="container">
    <h1>Whats Your Taste</h1>
    <div class="row">
        <form method="POST" action="/">
            {{ wtf.quick_form(form)}}

        </form>
    </div>
</div>

{% endblock %}

мой css 'main.css'

body{
    background-image: url({{ url_for ('static', filename = 'bg.jpeg') }});
}

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Попробуйте это: background-image: url ("bg.jpeg");

Вам нужно будет указать путь к файлу изображения. В вашем проекте css и jpeg находятся в одной папке, поэтому просто укажите имя изображения внутри url ().

Используйте jinja для HTML-шаблонов.

Смотрите здесь, как указать путь Как указать путь к фоновому изображению в CSS?

0 голосов
/ 14 ноября 2018

Вы не можете использовать Jinja в статическом файле CSS. Вам нужно изменить ссылку на URL-адрес на абсолютный URL-адрес или поместить это правило CSS в ваш фактический шаблон Jinja.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...