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.
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.
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.
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?
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?