How to display a section image in the header?

Question

1C-Bitrix

Tell me, is there a header where breadcrumbs and a title are displayed

<section class="smt-page-header">
            <div class="smt-page-header__overlay">
                <div class="smt-page-header__inner">
                    <div class="container">
                        <header>
                            <h1 class="smt-page-header__header"><?=$APPLICATION->ShowTitle(false)?></h1>
                        </header>
                        <div class="smt-page-header__breadcrumb">
                            <?$APPLICATION->IncludeComponent(
                                "bitrix:breadcrumb",
                                "smt_breadcrumb",
                                Array(
                                    "START_FROM" => "0",
                                    "PATH" => "",
                                    "SITE_ID" => "-"
                                )
                            );?>
                        </div>
                    </div>
                </div>
            </div>
        </section>

In the theme file header.php

It is required that when entering a section, its photo is displayed in this section. How to display it within

PICTURE or PICTURE_DETAIL does not matter. Just no matter how much I try, I get null.

Need to call a component? and there to receive the image? or is there an easy way?

Answer 1

1. In header.php

<section class="smt-page-header" style="background-image: url(<?$APPLICATION->ShowProperty('SECTION_BACKGROUND');?>);">
тут блок с заголовком
</section>

2. In the catalog.section component template, the result_modifier.php file

$component = $this->getComponent();
$component->SetResultCacheKeys(array('PICTURE'));

3. In the same template, the component_epilog.php file

$APPLICATION->SetPageProperty('SECTION_BACKGROUND', $arResult['PICTURE']['SRC']);