How to defeat inherited background?

Question

css

There is a "mother" base_template.html (which has it's own bg) that I inherit from.
The structure for the child file is:

{%block title%}
{%endblock%}

{%block navigation%}
{%endblock%}

{%block page%},
{%endblock%}

I'm trying to make my own background for one of the pages:

<div style="background-image: url('https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg')">

{%block navigation%}
{%endblock%}

{%block page%},
{%endblock%}
</div>

Those. the idea to "wrap" the page in its own div and its own bg
But, rightly, it doesn't work (because I inherit the "parent" file.

Question: is it possible to somehow defeat all this and change individual pages in my own way, but with the ability to save all these {%block%} // {%endblock%}?

I would like to get the following: if something is not described in the child file, then the parent's data is taken. If it is described, then your own.

Thanks in advance.

Answer 1

Easiest and fastest
AND in url without '

<div style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg) !important">

{%block navigation%}
{%endblock%}

{%block page%},
{%endblock%}
</div>