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 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
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
alignwide taken from my Legit theme.
margin-left: calc( 50% - 50vw );
Hopefully this post helps someone else dealing with issues between
background-attachment: fixed; not playing nice together.