TIP: Disable decorative row backgrounds on mobile without hiding the row content

I use large fixed or parallax background images on desktop pages. On smartphones, these images are barely visible because of the narrow viewport, but they are still downloaded and processed.

WebSite X5 allows complete Objects to be hidden at responsive breakpoints, but I could not find an option to disable only a Row Format background while keeping the text, buttons and other Objects in that row visible.

This had a measurable effect on my website. My reported mobile loading time improved from 10.33 seconds to 5.24 seconds after disabling these decorative backgrounds on smaller screens. Mobile interactivity improved from 231.5 ms to 35.5 ms, while visual stability remained 0.00. And that as average collected after days, sure those average results will show even better results.

The following custom CSS solved the problem:

<style> @media screen and (max-width: 1100px) { #imPageRowGraphics_7 { background: none !important; } } </style>

I added this under:

Page Properties → Advanced → Custom Code → Before closing the </HEAD> tag

The number is not necessarily the same on every page. For example, the required selector can be:

#imPageRowGraphics_7

on one page and:

#imPageRowGraphics_8

on another visually similar page. The correct ID can be found by inspecting the published page source or its page-specific CSS file.

This removes only the background on screens up to 1100 pixels wide. The row and all its contents remain visible.

A useful native WebSite X5 improvement would be an option under Row Formats to disable the background image at selected responsive breakpoints. Ideally, the image should then not be downloaded at all. This would avoid custom code and unstable generated row numbers.