T3Planet Updates September 2026: T3Planet Shop, New Docs and Every Release
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, so you need to adjust the media sizes of background images.
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