Styling The Cover Image Block

Reading Time: < 1 minute

As I’ve been developing my own Gutenberg theme one item I ran into trouble with was using the Cover Image block fixed background option.

The issue was due to my method for implementing the alignfull and alignwide image alignments within a fixed width container

The method I had been using made use of transform: translateX(-50%);. While this worked for breaking the element out of the fixed width container I discovered transform does not play nicely with background-attachment: fixed;

It essentially left my background image cut off halfway. Not a good look.

Yeah, that is not going to work.

Once I was able to determine the issue came from the use of transform the fix was rather easy. And I borrowed it from the great work done on the Atomic Blocks theme.

Rather than using margin-left: 50%; transform: translateX(-50%); I switched to using a simpler margin-left: calc( 50% - 50vw );.

Less lines of CSS and now my Cover Image block  spans the full screen. Here is the full working example for alignfull and alignwide taken from my Legit theme.

.alignwide {
    width: 100vw;
    margin-left: calc( 50% - 50vw );
    max-width: none;

    img {
        width: 100%;

.alignwide {
    width: 100%;
    margin-left: auto;
    max-width: 100%;

Hopefully this post helps someone else dealing with issues between transform and background-attachment: fixed; not playing nice together.

Pin It on Pinterest