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.

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.

.alignfull,
.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.