XF 2.1 how to fix background image in the mobile

[bolibick]

hi i put in the style propieties a full background image like this:

background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;

IN DESKTOP ITS SHOWS PERFECT:




BUT IN THE MOBILE / TABLES IT SHOWS HORRIBLE.. LIKE IT DOEN'T COVER AND FIXED... LIKE THIS:



HOW I CAN FIX THIS IN THE MOBILE / TABLET?

 

[Arty]

Fixed backgrounds don't work on mobile devices. That's normal behaviour of mobile browsers because fixed backgrounds cause entire document to be redrawn on every scroll, which badly affects battery usage.

Best solution is to never use fixed background.

Another solution is to create fixed pseudo element and set background to it:

body:before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  // put here your background stuff
}

 

[bolibick]

Fixed backgrounds don't work on mobile devices. That's normal behaviour of mobile browsers because fixed backgrounds cause entire document to be redrawn on every scroll, which badly affects battery usage.

Best solution is to never use fixed background.

Another solution is to create fixed pseudo element and set background to it:

body:before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  // put here your background stuff
}

thanks alot! this fix all my problems @Arty

 

[Simon Fillingham]

Fixed backgrounds don't work on mobile devices. That's normal behaviour of mobile browsers because fixed backgrounds cause entire document to be redrawn on every scroll, which badly affects battery usage.

Best solution is to never use fixed background.

Another solution is to create fixed pseudo element and set background to it:

body:before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  // put here your background stuff
}

Hi Arty (or @bolibick)

could you be more precise with this instruction?

i have this code

background-image: url('/upload/bmwdtmbackground1.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;

in appearances/styles/style properties/page setup/page background (in the extra css box)

what do i need to add to it, or replace it with, so the image DOES NOT display in mobile view.

thanks for any advice

 

[Simon Fillingham]

actually, i think the question is...

is it possible to have a style/theme with a fixed background image on desktop, but have the image disabled on mobile?