Hero Image Examples With Left-Hand Navigation
Example One
This is an example of the Medium Blue color option with Text Overlay and a Foreground Image. The Background Image Shape is set to landscape with a 2×1 ratio and has a top alignment (displays from the top down. If any clipping occurs it will happen to the bottom of the image). The dimensions of the background image is 2,560 x 1,073 pixels.
Example Two
Below is a set of three examples featuring identical content but with slight variations in settings to demonstrate nuances in display options. The dimensions of the background image is 2,000 x 1,500 pixels.
Top Alignment
In the following example, the Background Image Shape is set to landscape with a 2×1 ratio and has a top alignment (displays from the top down. If any clipping occurs it will happen to the bottom of the image).
Bottom Alignment
This example is the same as the one above, a landscape with a 2×1 ratio聽except the background image is set to bottom alignment ( the image displays from the bottom up. If any clipping occurs it will happen to the top of the image).
Maintains Original Shape
This example is the same as the two above except that the Background Image Shape is set to Original. This will display the full image.
Example Three
This is an example of the Light Blue color option with Text Overlay and a聽Foreground Image. The Background Image Shape is set to landscape with a 16×9 ratio and has a top alignment (displays from the top down. If any clipping occurs it will happen to the bottom of the image). The dimensions of the background image is 2,560 x 1,053 pixels. The dimensions of the School of Medicine logo is 600 x 600 pixels.
Example Four
This is an example of the Dark Blue color option with Text Overlay and no Foreground Image. The Background Image Shape is set to landscape with a 16×9 ratio and has a top alignment (displays from the top down. If any clipping occurs it will happen to the bottom of the image). The dimensions of the background image is 2,000 x 775 pixels.
Example Five
This is an example of the Light Blue color option with Text Overlay and no Foreground Image. The Background Image Shape is set to landscape with a 21×9 ratio and has a middle alignment. The dimensions of the background image is 2,000 x 1,363 pixels.
Example Six
This is an example of the Light Blue color option with Text Overlay and a聽Foreground Image. The background image is set to landscape with a 3×2 ratio and has a bottom alignment (displays from the bottom up. If any clipping occurs it will happen to the top of the image). The dimensions of the background image is 1,506 x 701 pixels.
Foreground Image:聽 this is the image of the Old Well used as the Foreground Image. Notice that there is some space around the old well to prevent it from being clipped when displayed within the circle. This image is 600 x 600 pixels.
Example Seven
This is an example of the Medium Blue color option with Text Overlay and a Foreground Image. The Background Image Shape is set to square. The dimensions of the background image is 1,600 x 1,067 pixels. The smaller, circular image is 400 x 300 pixels.
Example Eight
This is an example of the Dark Blue color option with Text Overlay and a Foreground Image. The Background Image Shape is set to circle. The dimensions of the background image is 2,500 x 1,667 pixels.
Example Nine
This is an example of the White color option with Text Overlay and no Foreground Image. The Background Image Shape is set to portrait. The dimensions of the background image is 1,024 x 1,024 pixels.
Example Ten
This example is from the website. It uses the Medium Blue聽color option聽with Text Overlay and a Foreground Image. The Background Image Shape is set to聽Original. The dimensions of the background image is 2,048 x 1,306 pixels.