TypoScript: Dynamic background image with CSS

It's very often that we need to put background images into the page design. It's often done with CSS. Here's an example how to get images from TYPO3 CMS pages media files.

Adding an image to the page preferences

First thing to do is upload an image to the page resources. Page -> Edit -> Resources -> Files -> Media. Now let's create a little TypoScript snippet to get image information, scale it and parse into our template.

TypoScript setup 

lib.pageBgImg = COA
lib.pageBgImg {
  10 = IMG_RESOURCE
  10.file {
    import {
      cObject = TEXT
      cObject.override {
        required = 1
        # slide sets image for all the subpages as well,
        # overwritten if subpage has it's own image added
        data = levelmedia: -1, slide
        wrap = uploads/media/|
        # gets first image from recources list
        listNum = 0
      }
    }
    # image manipulation – if 'c' crop is in action
    # images must be bigger than given width and height
    width = 1400c
    height = 540c
    format = jpg
    quality = 100
}

In FLUID template

Using FLUID as the template engine we add something like this into the template:

<body style="background: url(<f:cObject typoscriptObjectPath="lib.pageBgImg" />) no-repeat center 96px;">

Don't forget to include TypoScript snippet template to your main template ;)