XF 2.1 how to fix background image in the mobile

bolibick

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

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

199238

IN DESKTOP ITS SHOWS PERFECT:

199239


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

199241199242

HOW I CAN FIX THIS IN THE MOBILE / TABLET?
 
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:
Code:
body:before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  // put here your background stuff
}
 
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:
Code:
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 :love: @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:
Code:
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

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

:)
 
Top Bottom