T3Planet Partner Program 2026: Benefits, Tiers, Eligibility, and How to Apply
T3Planet
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
Join over 5000+ T3Planet Community