In order to use the the "Responsive Image Selector" attribute type to generate and output the CSS code you need basic programming skills.

First create a new attribute. You can create attributes for pages, users, files, express objects, and events.

The following sample shows how to set the attribute for a page to set an background image. However, the workflow is the same for all other objects.

  1. Navigate to Pages > Attributes and click and add a new Responsive Image Selector attribute.
  2. Select a unique identifier (handle) and an name. Confirm by clicking save.
  3. Next, navigate to a page of your choice from the Dashboard page "Sitemap" and add the new attribute from the left sidebar.
  4. Select a image set and confirm by clicking Save.

In your theme, you have to add the following PHP code snippet:

$c = Page::getCurrentPage();

$myAttribute = $c->getAttribute("myAttribute"); // @todo: Replace with your own attribute handle!

if (is_object($myAttribute)) {
    echo $myAttribute->getAttributeValueObject()->getResponsiveImageSet()->generateMediaQueryRule("body");

The above code snippet ensures that the background image (CSS selector "body") is rendered with responsive images from the selected image set.