BACKGROUNDS FOR COMPUTER CODE
You can also play with the code at jsFiddle.Download Free Rainbow Awesome 3D Background. On a desktop machine, one of the images is loaded at first, then when resizing the window, also that other image is loaded, if the limit is crossed. ('-bg-desktop', `url($"īecause images in unapplied CCS rules are not loaded, this way you can ensure, that the desktop image will not be loaded on devices having screen smaller than 769px (or what ever you put to min-width). Html = document.documentElement // A reference to element
Src = div.getAttribute('data-bg').split(','), // Exctracts URLs from data-bg to an array Ĭonst div = document.querySelector('.bg-image'), I can't do this inside my SCSS with media queries, because I can't set the background url's inside my SCSS. My goal is that the page won't load both of the images, but only the image that is needed on that viewport size. As far as I know both of these images will be loaded into the page, but they won't show at the same time because of the display properties. The user can upload a desktop background image, and a mobile background image at the CMS. I mostly end up with using Bootstraps d-none and d-block with media queries, but that doesn't feel right.Īnyone has a best practice for this with keeping good pageload in mind?Įdit: I added some code to show what I am trying to achieve.
I also tried to use the mobile detect with JavaScript, but the problem with that is if the user is working on desktop but with a small browser view, it doesn't get the 'mobile version' of the website. I am also questioning myself how I can do this with partials/ elements with just a lot of code (so not necessarily with background images) Ofcourse I can use display none and display block with media queries, but I'm hoping for a solution where only the mobile image loads on mobile/ small screen sizes, and only the desktop image loads on desktop/ big screen sizes so it is better for the page load.įor the img tag it is possible to use the img srcset, but with an background image that is not possible. What is the best way to do this? I am struggling quite a while with these kind of questions. I am working on a website (with Statamic v3 which uses Antlers, Bootstrap, SCSS) which involves different uploads for mobile and desktop backgrounds (inline styling).
0 kommentar(er)
