For the output of post content, the main column is constrained to 700px. This allows for images etc. to be aligned left and right whilst remaining within the content column.

Adding a solution using a combination of left and translateX to “stretch” the width of elements marked with .alignwide or .alignfull outside the containing column works fine. However, when the element - e.g. a Cover Block - is marked with the class name has-parallax to allow a background image with background-attachment: fixed, the background image is also transformed relative to the browser window and hence cropped.

Does anyone understand why this is the case, or have a solution? A very simplified example of this occurrence is in this Pen:

For the output of post content, the main column is constrained to 700px. This allows for images etc. to be aligned left and right whilst remaining within the content column.

Adding a solution using a combination of left and translateX to “stretch” the width of elements marked with .alignwide or .alignfull outside the containing column works fine. However, when the element - e.g. a Cover Block - is marked with the class name has-parallax to allow a background image with background-attachment: fixed, the background image is also transformed relative to the browser window and hence cropped.

Does anyone understand why this is the case, or have a solution? A very simplified example of this occurrence is in this Pen: https://codepen.io/permanenttourist/pen/LYVZOpN?editors=1100

• css
• block-editor
• front-end

• is this a frontend issue or a block editor issue? If this is an issue in stock Gutenberg you can raise a GitHub issue to get it resolved – Tom J Nowell ♦ Commented Feb 18, 2020 at 16:13
• Frontend. I've since found a better solution, which uses negative margins to “stretch” the elements in question. The Codepen at codepen.io/permanenttourist/pen/LYVZOpN?editors=1100 is updated with the improved solution. – Mark Howells-Mead Commented Feb 19, 2020 at 17:23

1 Answer 1

I've since found a better solution, which uses negative margins to “stretch” the elements in question. The Codepen at https://codepen.io/permanenttourist/pen/LYVZOpN?editors=1100 is updated with the improved solution.