如何从base.html django更改html标题背景图像答案

【问题标题】：How to change html header background image from base.html django如何从base.html django更改html标题背景图像
【发布时间】：2021-10-08 11:48:02
【问题描述】：

我在 Django 中扩展 base.html 并想更改 <header> 标签背景图像。我{% extends 'blog/base.html' %} 但背景图像没有出现在子模板上。我想知道什么似乎是错误？我正在使用 {% block header %} 标签继承基本模板，将新的<header> 标签插入到子模板中。我要更改标题背景图像的基本模板标题如下。

<header class="masthead" style="background-image: url('static/assets/img/home-bg.jpg');margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">
            <div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
                <div class="row gx-2 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="site-heading">
                            <span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

【问题讨论】：

标签： html css django-templates

【解决方案1】：

我让它通过块模板标签工作。在base.html:

{% block header %}
 <header class="masthead" style="background-image: url('static/assets/img/home-bg.jpg');margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">       
            <div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
                <div class="row gx-2 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="site-heading">
                            <span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
                        </div>
                    </div>
                </div>
            </div>
    </header>
    {% endblock %}

在postdetail.html:

 {% block header %}
     <header class="masthead" style="background-image: url({% static 'assets/img/home-bg.jpg' %}); ; background-position: center; margin-bottom: 0;padding-top: 21%;padding-bottom: 10%;">       
            <div class="container position-relative px-4 px-lg-5" style="padding-top: 0;">
                <div class="row gx-2 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="site-heading">
                            <span class="subheading"> Novel life hacks, tricks, skills and methods in all walks of life.</span>
                        </div>
                    </div>
                </div>
            </div>
    </header>
    {% endblock %}

【讨论】：