Fixed background emergency

Hi guys… I can’t tell you how much I appreciate your skills, products and (generally) your support!

I look forward to making a nice donation even if I don’t upgrade to Moesia pro.

The only issue I have is that I can’t seem to get help making my site fully optimized in mobile. I REALLY want to have the fixed background function on mobile- the entire site is built around the story it creates nicely. It doesn’t convert as well with the block images.

PLEASE PLEASE help me get the row backgrounds to stay when viewing on mobile! I don’t need true parallax (although that would be a bonus), but I need fixed background.

This thread is also unresolved with similar issue: https://athemes.com/forums/topic/parallax-on-mobile/

*One thing I've noticed as well is that mobile css code is set to max width of 1024. Does this mean that devices with higher resolution like ipad 2, 3 & 4 (resolution of 2048‑by‑1536) won't qualify?

Thank you for your ehlp with this… very much!!

Here’s a site that works with fixed background on mobile EASILY, QUICKLY AND SMOOTHLY

Thanks!!

Hi,

Please remove your current custom css code which you applied (you’ve mentioned it in email) and try this css code instead:

@media only screen and (max-width: 420px){
  /* the header image */
  img.header-image {
    height: 270px;
  }
  /* 1st section */  
  #pg-235-0 .panel-row-style {
    background-attachment: scroll !important;
  }

  /* 4th section */
  #pg-235-3 .panel-row-style {
    background-position: 90%;
  }

  /* 5th section */
  #pg-235-4 .panel-row-style {
    background-position: 79%;
  }

  /* 6th section */
  #pg-235-5 .panel-row-style {
    background-position: 60%;
  }

  /* 7th section */
  #pg-235-6 .panel-row-style {
    background-position: 70%;
  }
}

@media only screen and (max-width: 736px){
  /* the header image */
  img.header-image {
    width: 100%;
    height: 360px;
  }
}

@media only screen and (max-width: 768px){
  #pg-235-0 .panel-row-style { 
    background-size: contain;
    background-position: 100% 70%;
  }
}

@media only screen and (min-width: 1024px){
  /* the header image */
  img.header-image {
    width: 100%;
    height: 480px;
  }
}

Let me know how it works

Unfortunately it did not work. The previous css DID make the images stretch full, but with the current code I experienced spaces between the background images (and of course they are scrolling like images on a page).

So, no go unfortunately. Thanks for the attention to this - I know we can figure it out. I’ve been working on it for days (researching) As mentioned above, it DOES function correctly on mobile here: http://weinspirefitness.co.uk/

Many thanks

Yes I know, I didn’t make the background image stretch full width because I think the content of the section is too much. So, if the background image is stretched, the section would display like this http://prntscr.com/a7ngvx

Thanks Awan, although I’m not sure what you are referring to… you screenshot shows an image that ends prematurely. If you look at the site now you will see no gap in the backgreounds due to the code I mentioned before.

That is not the problem we are trying to resolve (as I did not approach you with that issue occuring). The problem is keeping the row backgrounds fixed on mobile.

PLEASE help! So many thanks for the attention!

Hi,

My apologize, I’ve notice that there is another configuration about the header image of the theme. So Its need you made a little modification to the theme and its recommended if you are modify the files in a child theme.

After you create a child theme, now you need to:

  1. duplicate “inc/custom-header.php” from the parent theme to the child theme
  2. open “inc/custom-header.php” in your child theme and change this line:
@media only screen and (min-width: 1025px) {	
  .has-banner:after {
    <?php if ( is_page() && $himage != '' ) : ?>
 	background-image: url(<?php echo esc_url($himage); ?>);
    <?php else : ?>
   	background-image: url(<?php echo get_header_image(); ?>);
    <?php endif; ?>
  }
}

to:

.has-banner:after {
    <?php if ( is_page() && $himage != '' ) : ?>
 	background-image: url(<?php echo esc_url($himage); ?>);
    <?php else : ?>
   	background-image: url(<?php echo get_header_image(); ?>);
    <?php endif; ?>
  }
  1. Because you already have a child theme, then add these css code (to make the background fixed) to the styles.css within your child theme. :
.has-banner:after {
    content: '';
    background-attachment: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 1024px){
  img.header-image{
    display:none;
  }
}

.panel-row-style {
    background-attachment: fixed !important;
}

Let me know how it goes.

Regards,
Awan

Do I include

" @media only screen and (min-width: 1025px) { "

in new code??? Your instructions report to NOT do so.

and the added css - does it not require a title? It just starts “.has-banner:after {” ???

And can this just be done in custom css?

Thanks for the attention!

I tried all variables in case you were trying to overwirte some sort of mobile code … I included and excluded "@media only screen and (min-width: 1025px) { ” in my tests.

Without line was fail for header.

With line was not resized background images and not fixed…

I hope we can get this!

Do I include ” @media only screen and (min-width: 1025px) { ” in new code??? Your instructions report to NOT do so.
yes, because those media query indicate to be working in desktop version only.
and the added css – does it not require a title? It just starts “.has-banner:after {” ??? And can this just be done in custom css?
No title needed and yes just put it in custom css

And I am sorry, there is missing css code in the instruction in above. Add this and please to adjust the value of height rule:

.has-banner{
	height: 200px;
}

Please apply all instruction in above so I can help you further for what trick to be added more.

Thanks.

Because you left out the first part of code in message 1 and the left the second part out in message 2 PLEASE POST THE COMPLETE CODE THAT SHOULD BE ADDED TO CUSTOM CSS IN ONE MESSAGE so that other users and I can have one block of code to understand and copy into Custom CSS (I Am not using child theme as I have nearly 0 custom css. I will use if needed, but this seems like Custom CSS can handle it.)

Many thanks!!

Hi,

Sorry for the inconvenience.
We are tying our best to answer every question in this forum. Every replies in above is replied as per conversation. But thank you for your advice.

In this case,you still need to using child theme to modifying your theme because one of the section in your site is a header image which is the image can be change dynamically and the setting of the header image is placed in the PHP file. So here is the final instructions:

  1. Create a child theme
  2. duplicate “inc/custom-header.php” from the parent theme to the child theme
  3. open “inc/custom-header.php” in your child theme and change this line:
@media only screen and (min-width: 1025px) {	
  .has-banner:after {
    <?php if ( is_page() && $himage != '' ) : ?>
 	background-image: url(<?php echo esc_url($himage); ?>);
    <?php else : ?>
   	background-image: url(<?php echo get_header_image(); ?>);
    <?php endif; ?>
  }
}

to:

.has-banner:after {
    <?php if ( is_page() && $himage != '' ) : ?>
 	background-image: url(<?php echo esc_url($himage); ?>);
    <?php else : ?>
   	background-image: url(<?php echo get_header_image(); ?>);
    <?php endif; ?>
  }
  1. open functions.php in your child theme and add this line:
    require get_template_directory() . '-child/inc/custom-header.php';

  2. activate your child theme, it will display an error message or make your site blank

  3. to fix the error on point 5, open functions.php and change this line:
    require get_template_directory() . '/inc/custom-header.php';
    to:
    // require get_template_directory() . '/inc/custom-header.php';

  4. Because you already have a child theme, then add these css code (to make the background fixed) to the styles.css within your child theme. :

.has-banner{
  height: 200px; /* you can adjust this value depends on you need */
}

.has-banner:after {
    content: '';
    background-attachment: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 1024px){
  img.header-image{
    display:none;
  }
}

.panel-row-style {
    background-attachment: fixed !important;
}

Let me know how it goes.

Regards,
Awan

That code suggestion distorted background images and did not make them static. They were pixelated and scrolled.

Thanks for the try!

Please put the code in above and let me know which is working and not.

i put the code in step 3 into incl/custom header

I put the code from step 4 into custom css

Essentially breaks background usage

I restored files to previous status as my site is live and needs to be viewable

Is this the info you need? Hope so :slight_smile:

Thanks!

Can you paste the the modified content of custom-header.php file to pastebin.com and share the link here?

Just update the instruction #222634, please check

Awan, I appreciate your attention on this … but it seems we are using my site to test code… Have you experienced this fix on your own site? Please note that the moesia demo also fails to respond with fixed backgrounds on mobile. I know you amazing Athemers can figure out how to make this function! I’ll be investing in Moesia when you do!

May I suggest a much more efficient manner in solving this theme wide issue?
If you fix the moesia demo (a clone of it I assume) to work with fixed backgrounds then you’ll really know what needs to be done on my site and others’! … Or simply create a one page (front page) site with moesia, use pagebuilder, create 3+ rows with 4+ text widgets in each row. Assign a unique 1020x1950 image to EACH background of EACH row. Publish, test on desktop, test on mobile - fix it to function on mobile and publish the code to make Moesia a fully responsive theme.

This will be 1000 times faster than testing codes through this topic and easier for you to diagnose.

Then we’ll have a party in your honor!! ALl the other topics that ask the same question will praise you as The One!!

:slight_smile: <3

Hi @onenessid, I really appreciate your feedback. As you can see in our forum, there are a lot of our customer that asking for help to setup their site, fixing bugs and modifies their theme.

They are asking different question that need us to supported to. We do collect every question from them and if the question is similar with the previous one, then we give them the solutions of the previous question to resolve their issue.

And for your question in here, yes its the first question about how to make the header image has fixed background for this theme. I know that to make the header image displayed with fixed background is not good enough on all mobile devices, that’s why we make this header image displayed as an image not as background image. But it depends on their sites, sometimes its worked in site A but not worked in site B.

We did test the code on locahost and check it first before sending it to you, but every site has different environment, that’s why it need to be tested directly to your site.

We apologize if this doesn’t make you feel comfortable, but we will try our best to answer your questions.

Please feel free to ask here if you need more help.

Regards,
Awan

Thanks Awan, I’m just able to get to this.

I think we may not be on the same page. You mention fixed header image, but I’ve asked that ALL background images remain fixed (in mobile) while the widget content scrolls over the backgrounds. This is not asking to do anything that the site does not currently do on desktop.

Excellent solution: If you send me a link to test your local hosted site I can give feedback on how it works and if we are on the same page. This will keep my active & live site healthy and not broken (as it’s been every other attempt) while we explore the solution. – The framework for my site is Moesia and I’ve adjusted nearly 0 code, so if it works on your Moesia it will work on mine.

This is not the first nor second question about this: here is one link to the same topichere:

I appreciate your help on this and all the help you give to everyone - that has never been in question.

Best,
Lucas