Documentation¶

What does it do?¶

This extension allows background images and background options for all content elements (text, text with image, forms, plugins, FCEs, ...).

Features¶

• Background image and background color for all types of content elements
• All available CSS settings for background images can be configured (color, repeat, position, size, attachment)
• Supports rendering of content elements with Fluid and css_styled_content
• Height of content element can be set to a fixed height
• Height of content element can automatically be set to the height of the background image
• Adaptive background image (for smaller screen devices smaller images are loaded) with media queries (not with ext. css_styled_content)
• CSS styles are stored in a CSS file which is included in head (inline styles with ext. css_styled_content)
• Easy handling for editors

Screenshots¶

The upload field for the background image and the configuration options.

HTML output¶

This extension provides a class (for Fluid Templates with a viewhelper) and generates CSS code for this class:

<div id="c1854" class="frame backgroundimage-c1854 default">

.backgroundimage-c1854 {
    background-color: #cc3366;
    background-repeat: repeat;
}
@media all {
    .backgroundimage-c1854 {
        background-image: url("/fileadmin/_processed_/csm_bg_download_7199d18411.jpg");
    }
}
@media all and (min-width: 768px) {
    .backgroundimage-c1854 {
        background-image: url("/fileadmin/_processed_/csm_bg_download_030f57882e.jpg");
    }
}
@media all and (min-width: 992px) {
    .backgroundimage-c1854 {
        background-image: url("/fileadmin/_processed_/csm_bg_download_05d9514221.jpg");
    }
}
@media all and (min-width: 1200px) {
    .backgroundimage-c1854 {
        background-image: url("/fileadmin/_processed_/csm_bg_download_05d9514221.jpg");
    }
}

Configuration¶

After installing this extension via the extension manager and updating the database, you have to include the extension template in field "Include static (from extensions)" in your main template on last position.

Last position because it overwrites Fluid Templates and TypoScript settings which are sometimes overwritten by other extensions.

At least, you should add this template after the static templates of ext. css_styled_content, bootstrap_package and fluid_styled_content.

Then, the fields for the background image and background options are available in tab "Appearance" of every content element.

Usage in Fluid Templates¶

If you use this extension with ext. bootstrap_package or fluid_styled_content, the CSS class is provided by a viewhelper:

{namespace bg4ce=SBTheke\Backgroundimage4ce\ViewHelpers}
[...]
<div id="c{data.uid}" class="frame {bg4ce:renderBackground(cObj: data)}">

The Fluid templates of both extensions are modified and overwritten by this extension, so in most cases you don't have to do anything. But if you or a third extension overwrite these templates, you have to include this viewhelper.

To-Do list¶

Preview of the background image and background options in the page module. Sponsoring is welcome.

Write me if you have any suggestions or improvements.

FAQ¶

Problems¶

ChangeLog¶

See file ChangeLog in the extension directory.

Sponsoring¶

Many thanks to reinstil GmbH & Co KG (www.reinstil.de) for sponsoring the initial release of this extension.