CODEWITHSUNDEEP
typo3typoscriptfluid
Mithun Jack
Mithun Jack

Reputation: 301

How to set the body background for typo3 without or with extension?

I am using typo3 v9.5.0. I need to design a website with a background image wrapped all over the content element and menu. There is no specified layout in bootstrap package. I've tried extensions like background by uploading the image.

But there is something wrong. By default its pointing the wrong resource which it left(typo3/01_DBM).

I have no clue why it's behaving like that. If there is any other extension or technique, kindly suggest me. But I want it to be done dynamically because it needs regular updation.

Upvotes: 0

Views: 1302

Answers (1)

Bernd Wilke πφ
Bernd Wilke πφ

Reputation: 10800

  1. TYPO3 9.5.0 is outdated. although you use it localy update to current version.

  2. you have multiple options to integrate a background image to the whole page.

Here my recommandation which does not require any specific extension:
As you use the bootstrap-package you can enhance the Fluid-templates of it in your own site-extension (which you should use).

Where do you get the image from?

Every pages record (defining a page in TYPO3) has fields for related media files (you can find/set it on the Resources tab.
Here an editor can easily insert an image which should be used as a background image to the content.

In your typoscript definition of variables for the page you can define an own variabel for the first image 

10 = FLUIDTEMPLATE
10 {
    [...]
    dataProcessing {
        111 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        111 {
            references {
                fieldName = media
                table = pages
            }
            as = BackgroundImages
        }
    }
    [...]
}

and use it in the fluid template for the page like:

[...]
<div style="background-image:url(fileadmin/{BackgroundImages.0.originalFile.identifier});">
    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '0'}" />
</div>
[...]

further enhancements could use a sliding mechanism, so a page without own background-image could use the image of parent page.

Upvotes: 1

Related Questions