Image Styles

WordPress calls images that have text titles “cover blocks.” Here are some pre-made styles that let you add images with text overlay. The background image can be fixed or parallax and you can change its opacity and add an overlay color.

Image with transparent overlay and optional title



Reusable Block Name: Cover


These images have no overlay- the background overlay is set to 0% transparency.

Center aligned text over a “cover” image

Left aligned text over a “cover” image

Right aligned text over a “cover” image

Parallax images

Left aligned text over a “cover” image with parallax

Images can also have the parallax effect, like this one here. You can establish that in Settings for the “Cover” image block by clicking “fixed background”. The overlay tint is set to 10%.

Tints over images

Tint overlays can be used for both design purposes and to keep your type legible when placed over an image. WordPress allows you to add a tint overlay over images. The overlay can be any color and any transparency. We recommend keeping the color within brand and to always ensure that your text is readable.

background image with 50% tinted overlay

background image with 80% tinted overlay of the “UVM green darker” color

Tinted image background with image-caption overlay

Reusable blocks can often be combined. Here we have a cover image in the background with a green tint overlay. We’ve placed a Media & Text block on top.

Student in the biochemistry lab, Jeffords Hall

This is a Media & Text block on top of a cover image with a tint overlay

Image layered over the topographic pattern

Here we have placed a top pattern swatch combined with white as a background image. We only have the top pattern on part of the background so we’ve ‘faked’ a partial offset background.

decorative
A classroom at UVM

Hero headers

You can set more text than just a headline over your cover images. You can also use the cover image with a call to action by adding a button. We’ve gone into a bit more detail on how to create these hero banners on this page.

Student in the biochemistry lab, Jeffords Hall

This is a headline

This is a paragraphi it is flush left. It is placeholder text. It is white. You are not supposed to read it- it doesn’t really mean anything. Are yo ustill reading this? Why are you reading this?

UVM campus in the spring

Lorem Ipsum research at UVM

This is a paragraphi it is flush left. It is placeholder text. It is white. You are not supposed to read it- it doesn’t really mean anything. Are yo ustill reading this? Why are you reading this?

Skip to toolbar