Elementor Page Builder: Hintergrundbilder optimieren

Ich habe mir mal den Elementor Page Builder für WordPress näher angeschaut (für ein anderes Projekt) – und bin gleich darüber gestolpert, dass Hintergrundbilder immer in voller Größe ausgeliefert werden. Gut, in Zeiten von DSL und LTE mit Flatrates mag das egal sein, aber überflüssig ist es irgendwie schon: man kann doch auch einfach ein passendes Bild ausliefern anstatt im Browser zu skalieren. (Das gibt dann auch gleich Bonuspunkte im Google Ranking, wegen mobile first und so)

Auch wenn WordPress inzwischen responsive images besser unterstützt als früher und man mit Plugins diese Unterstützung noch verbessern kann: Hintergrundbilder sind da eiegntlich immer außen vor (Genau wie auch Titelbilder von Seiten und Artikeln). Dabei sind media queries in CSS nicht wirklich kompliziert….

Langer Rede kurzer Sinn: In den Tiefen des Internets habe ich (hier) eine Lösung für mein Problem gefunden, die ich einfach mal hierher kopiere.


Peter Nelis
August 4, 2017 at 6:09 PM

Got another bit of CSS fiddling here related to increasing background image control. This is a bit more weighty than the previous one posted in my earlier comment, and probably best used sparingly, but it’s got the potential to be very useful depending on what level of control you want…

What It Is:
Some (VERY) manual media queries that’ll let you pull a different hero/background image depending on the max and minimum viewport width

Why It Might Be Useful for You:
Fixed height background images are a pain in the butt to find a one-size-fits-all solution, even if you move things around with background-position and media queries. SOOOO this actually lets you control which image is loaded based on the screen size (note: it ONLY loads the image that is set to display, so no undue increase in page size – in fact it could help make your sizes smaller)

How It Works:
SRCSET doesn’t play all that nicely with backgrounds (read: it doesn’t play at all without some JS, which I didn’t want to add), so I did a little playing with media queries on the Elementor row element I wanted to control the background for.

To prep for this, create the various versions of the image you need, and name them based on their width (eg a 1280px wide image should be image-name-1280.jpg). Do this for each image based on your break points.

Next, you upload a 1x1px transparent png – this is the “holding” image that will never display, but which will help cut down on the amount of code needed by letting you control default position, overlay, transparency etc within Elementor.

Next, save and view the page, find the background row element class (which will look like .elementor-element.elementor-element-******* where the *s are alphanumerical characters).

Next, add this CSS to your page/stylesheet (adjust the min max break points however you like):

@media screen and (max-width: 767px) {.elementor-element.elementor-element-******* {background-image: url(http://***/767.jpg) !important;}}
@media screen and (max-width: 1024px) and (min-width: 768px) {.elementor-element.elementor-element-******* {background-image: url(http://***/1024.jpg) !important;}}
@media screen and (max-width: 1280px) and (min-width: 1025px) {.elementor-element.elementor-element-******* {background-image: url(http://***/1280.jpg) !important;}}
@media screen and (max-width: 1440px) and (min-width: 1281px){.elementor-element.elementor-element-******* {background-image: url(http://***/1440.jpg) !important;}}
@media screen and (max-width: 1920px) and (min-width: 1441px){.elementor-element.elementor-element-******* {background-image: url(http://***/1920.jpg) !important;}}
@media screen and (min-width: 1921px) {.elementor-element.elementor-element-******* {background-image: url(http://***/2650.jpg) !important;}}

Et voila – you’ve now got a hero/background image that will only display at native width or lower, will change based on the viewport width, and that only loads when necessary.

It’s probably a little clunky and impractical for most use cases, but if you’re obsessive about larger-than-native images, unsightly artefacts, and backgrounds that just won’t do what you want them to, then this might be for you!