How to adjust various media sizes in Background Image with TYPO3 Fluid?

Are you interested in incorporating media, into a background image within a div or section? Consider a scenario where you need to display a background image that supports different devices, such as mobile phones, tablets, desktops, and widescreens.

You can achieve this by using the <f:asset.css /> TYPO3 Fluid ViewHelper for inline CSS options with different sizes. Since the background image is dynamically generated from the TYPO3 backend, you cannot specify it in a CSS file; instead, include it in a Fluid template or partials.

For example, if you have a <div> element where you want to set a responsive background image, refer to the Fluid code example below.

<section class="my-section">
    <f:asset.css identifier=" c-{data.uid}" priority="true">
        <f:if condition="{data.image}">
            .my-bakground-image {
                <f: variable name="bg-Img">{f:uri.image(image: '{data.image.0}')}</f:variable>
                background-image: url({bg-Img}) !important;
            }
        </f:if>
        @media only screen and (min-width: 576px) {
            <f:if condition="{data.image}">
                .my-bakground-image {
                    <f:variable name="bg-Img">{f:uri.image(image: '{data.image.1}')}</f:variable>
                    background-image: url({bg-Img}) !important;
                }
            </f:if>
        }
    </f:asset.css>
    <div class="my-bakground-image">
        <!-- Your Code -->
    </div>
</section>

Have a Happy TYPO3 Coding!

Post a Comment

×
Captcha Code Can't read the image? Click here to refresh

    Got answer to the question you were looking for?