bernhard Posted December 7, 2023 Share Posted December 7, 2023 I'm working on a website where I want to add an image as background: The image comes from a PW images field. So I can't add the image via CSS... I'm doing it like this: <html lang="de" class="uk-background-muted" style="background-image: url(<?= $site->bgImgUrl() ?>)"> In CSS I have this: html { height: 100vh; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } So far, so good. But I don't need that image on mobile, as it will never be visible. I only need it for screen sizes > 1440px. Any ideas how I could do that? I tried adding a <style> tag with @media(min-width: 1440px) { ... } </style> but that did not work. As soon as I placed it as "style" attribute of the html tag it worked. Thx for your help ? 1 Link to comment Share on other sites More sharing options...
da² Posted December 7, 2023 Share Posted December 7, 2023 Hello, my first idea would be to pass image URL to a CSS variable, so you can use media query to condition loading of image. There may be a more elegant solution, maybe using <picture>? (I never used it yet) Link to comment Share on other sites More sharing options...
dotnetic Posted December 7, 2023 Share Posted December 7, 2023 Hi Bernhard, you could just use an image tag inside of the body with object-fit. The advantage of this method is that you even could use different images for different resolutions if you want to. Another advantage is that you do not land in specifity hell because the style attribute has a very high specifity. I created a small codepen example, that you could use as a base: https://codepen.io/jmar/pen/oNmmJeB 1 Link to comment Share on other sites More sharing options...
da² Posted December 7, 2023 Share Posted December 7, 2023 @dotnetic Maybe I misunderstood, I thought he doesn't want the image to be loaded below a certain screen size. And since URL comes from a ProcessWire page he can't push it in a CSS and use media queries. In this case I tested the following and it's working: <style> :root { --myImageUrl: url('{{ pages.get(5872).gameLogoLarge.url }}'); } body { /* This part can be in external CSS. */ @media screen and (min-width: 640px) { height: 100vh; background: var(--myImageUrl) no-repeat fixed center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } </style> Note that it works on <body> but not <html>, but I don't think you have to put something on html except (maybe) the "height:100vh". 2 Link to comment Share on other sites More sharing options...
dotnetic Posted December 7, 2023 Share Posted December 7, 2023 26 minutes ago, da² said: he doesn't want the image to be loaded below a certain screen size If that is what he wants, it can be achieved with using the picture element and source <picture> <source media="(min-width: 1440px)" srcset="https://placekitten.com/1024/800"> <img src="no-image.png" id="hintergrundbild"> </picture> so the image would only load on screen size at 1440px and above. The no-image.png could either be replaced with a blank image or a low res version, which will never get shown, because the element is hidden by default. But sure, it will produce a 404 if the image does not exist. I adapted my codepen, to reflect these changes. I am not saying that da2's solution is wrong. It is just another way to do it. But I think the version with using an image is much more flexible. 1 Link to comment Share on other sites More sharing options...
bernhard Posted December 12, 2023 Author Share Posted December 12, 2023 Hey Jens this works great, thank you! {* page background image *} <picture id="page-bg"> <source media="(min-width: 1400px)" srcset="{$home->backgroundImageUrl(1920)}"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" alt="Page Background"> </picture> And the css: body, html { height: 100%; width: 100%; } #page-bg img { position: fixed; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } I'm using a transparent pixel data-url by default (taken from https://shoonia.github.io/1x1/#00000000). 1 Link to comment Share on other sites More sharing options...
Recommended Posts