---
title: "Examples"
manual: "Focuspoint"
version: "main"
permalink: "https://docs.typo3.org/permalink/lochmueller/focuspoint:examples@main"
source: "Example/Index.rst"
rendered: "2026-11-04T11:44:05+00:00"
---

# Examples {#examples}

This is a collection of examples provided by github issues.
Thanks for contributing and sharing.

## Responsive Header IMG with pure CSS {#responsive-header-img-with-pure-css}

Contributed by Martin Zarth (www.zarthwork.de).
The header files are integrated inwards the page relations in three different sizes. Additional CSS for the image container has been set to:

```css
.bgimg {
	width: 100%;
	height: 600px;
	display: block;
}
```

The Integration is done by TS inlineCSS like so:

```typoscript
page.cssInline {

    // needed to let dataWrap
    // recognize curly brackets
    1 = LOAD_REGISTER
    1.curl1 = {
    1.curl2 = }

    // <source>
    10 = FILES
    10 {

        // get the reference from pages > media
        references {
            table = pages
            uid.data = page:uid
            fieldName = media
        }

        renderObj = IMG_RESOURCE
        renderObj {

            // import file
            file.import.data = file:current:uid
            file.treatIdAsReference = 1

          stdWrap.dataWrap.cObject = CASE
          stdWrap.dataWrap.cObject {

            // get files by sorting num
            key.data = register:FILE_NUM_CURRENT

            // sm
            0 = TEXT
            0.value = background-image: url(|);
            0.postCObject = TEXT
            0.postCObject.value = background-position: left {fp:xp_positive}% top {fp:yp_positive}%;
            0.postCObject.if.isTrue.data = fp:xp
            0.wrap = .bgimg {register:curl1} | {register:curl2}

            // md
            1 < .0
            1.outerWrap = @media only screen and (min-width: 600px) {register:curl1} | {register:curl2}

            // lg
            2 < .0
            2.outerWrap = @media only screen and (min-width:1024px) {register:curl1} | {register:curl2}

          }
          stdWrap.wrap = /|

      }

        begin = 0
        maxItems = 3

        stdWrap.outerWrap (
            /* background-image with focus point*/
                |
            /* */
        )

    }

}
```