Scrollyteller background image with attribution

Placing images as a backgrounds is the easiest way to get started, that is covered here. This will show you how to make an image with attribution over the image in the bottom right corner, but you can of course choose any corner you like.

In order to make an image with attribution over the image we have to use generateblocks elements and the Document overview feature in WordPress. It is a little bit of extra work because we have to set up a structure of containers and then adjust some settings in them, but once you have done it you can multiply and reuse that container structure so you have a template for image with attribution.

  • Make a new WordPress page, full width content container etc..
  • Open the ‘document overview’ sidebar in your WordPress editor, its in the menu above the main editor window and looks like three steps:
  • Make a new generateblocks container and give it a class name of ‘bgimage’.
  • Change the container’s content position to bottom right for the attribution appear in the bottom right corner

Click the icon with 9 dots inside a frame to set content position. Choose bottom right, or whatever corner you like.

  • Inside that container make a generateblocks image element to use for your background image.
    • Choose your image
      • recommended witdh between 1920 and 2560 px
      • jpeg at 70% quality
      • Portrait mode not reccomended, images with aspect ratios 4:3 , 3:2 and 16:9 should work well.
      • In the right sidebar menu for the image block set Object-fit to ‘cover’. This is necessary for the image to fill the container.
      • Set the ‘height’ property of the image too ‘100vh’.
  • Inside the same container make another container to hold your attribution.
    • Make a paragraph inside the attribution container and type seomthing so you see it on screen, we’ll change it later.
  • In the right sidebar menu for the attribution container block, set a negative top-margin value so the attribution positions itself above the image. You can also change the text colour to get contrast against the background image.

Set negative margin to position attribution.

If this went right you should now see this structure in your WordPress Document overview:

If you don’t see this but have the same elements ordered differently, or in a different hierarchy. You can drag and drop the elements in the WordPress Document overview like this:

Multiply this structure for multiple images with attribution

Setting up this structure, adding classnames and adjusting properties is a little bit of work. If you want another image with an attribution an easy way to achieve this is to duplicate the structure we just made and then change the image and attribution as neccessary.