Different background image on desktop and mobile devices

BB Theme
1

Hi all,

I have been now trying two days to find solution for showing background image on mobile devices.

I have site which use beaver builder and beaver theme. I have background image set on general section on theme settings. It is fixed and filling screen. On desktop it works fine.

I know fixed background not work on mobile so i have been trying to find out way to remove background on mobile devices and showing it only on desktop. That way i could have custom block on mobile devices through beaver builder modules.

But i just can’t find solution to remove background on mobile devices. I have tried microthemere, css, google, @media .fl-page .fl-page-content and so on. Nothing seems to affect background basicly at all.

Could someone help me out with this?

My primary target for solution with my current knowledge is to remove background image when screen size drops. and on same px-size new block will be come vissible which is like entry image when entering a site.

And off-topic comment is that is it really that complicated to have fixxed background on mobile browsers… i know firefox have it but yet… for me it seems that on todays devices it should be easily doable.

Have a great day all!

2

I found it after 8 hour of try and fail!

This code on theme additional css section worked finally!

body::before {
content: ‘’;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(image.jpg);
background-size: cover;
background-position: left top;
}