WordPress calls images that have text titles “cover blocks.” Here are some pre-made styles that let you add images with text overlay.

This block-type has several alignment options, but we are overriding with a left alignment. The centered alignment can create unsightly text wraps, orphans and widows.

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


A center aligned cover image block with text.

A center aligned cover image block, left aligned text.

Parallax images

Images can also have the parallax effect, like this one here. You can establish that in Settings for the “Cover” image block or just selected the one we’ve pre-made for you and then edit the text and image.



Reusable Block Name: Image__Parallax image background with type overlay

This is a wide-width cover block with a fixed background image with a 20% opacity

and parallax effect.

Your cover image can be parallax if you like

Make sure that all the text is readable. You can adjust the transparency of the overlay color in “Color Settings”.

Our last cover image block has a wide width.

Video background with text overlay



Reusable Block Name: Banner__Video Background with Text Overlay

This is a wide cover block with a video background.

background image with 50% tinted overlay

Tinted image background with title



Reusable Block Name: Image__ Tinted image background with text overlay

The block below has no alignment.

This is a 80% Overlay with color “UVM green darker”.

Tinted image background with image-caption overlay



Reusable Block Name: Image__Tinted image background with image-caption overlay

Student in the biochemistry lab, Jeffords Hall

Lorem ipsum research at UVM

This time the image is to the right. Nice to have this flexibility.

Image layered over the topographic pattern


Reusable Block Name: Image__Layered image with topo background pattern

decorative
A classroom at UVM
UVM campus in the spring

Lorem Ipsum research at UVM

This is placeholder text. It is not meant to be read. It doesn’t really mean anything so there is no way it can gather attention and interest. Are you still reading this. Why are you reading this.

Student in the biochemistry lab, Jeffords Hall

This is a headline

This is placeholder text. It is not meant to be read. It doesn’t really mean anything so there is no way it can gather attention and interest. Are you still reading this. Why are you reading this.


Please don’t do this!

Do not left align or right align a cover image. They don’t work on mobile.

Skip to toolbar