Design Notes

Following a live stream where Joe explains how to use the position swatch to centre text over an image. The Live Stream can be found here.

Points to note:

• The overall container is set to full width.
• Position relative is set to on.
• The position swatch is set to be relative to parent.
• The values are 50% from the top of the container and 50% from the left of the container. This causes the top left corner of the header to be centered so.
• Centre Origin X and Y are both set on.

Another swatch is used to set a background overlay but because of a bug, the Z index on it is being set to -1 when it needs to be +1. Hence the need for the Z-index swatch until the bug is fixed.

Joe went on to add a Filter Pro swatch to this setup targetting 'page-header img' but when I tried that it caused the image to shrink to half the width of the page!

This first demo uses an image at its full width so the depth of the image is dependant on the image aspect ratio and this may give a result that we don't want. The second demo (below) uses an image as a background image to do the same thing. This requires a height adjustment using the height swatch to make sense.

A shadow has been added to the text by targetting 'background-demo h1' which targets the h1 within the background-demo class.

The third demo uses Aspect ratio to determine the height of the image based on the width of the browser. 16:9 is used for medium and large, 4:3 is used for small.

Image taken with a Sony A7CR with a 35mm lens at F4, ISO 400 and shutter speed 1/160 sec in the Shambles, York, 6th July 2024