[Resolved] Background image questions

[Warwick]

Please forgive the probably very simple questions – but I am a complete novice with using wp and generate press.

I am busy building a site and have two questions relating to background images:

1. I added a background image to the home page and see it carries across to every page – is there a way to change page by page? In some instances I would probably not want a background image at all?

2. I have set the image to fixed so that I get a scrolling effect. This works fine on the laptop. When I go to the customize tab on wp and click on the mobile icon it does the same. However, when trying to actually view the site on a mobile the image does not scroll at all. Can you advise what this may be?

The site is: http://www.safariinstyle.com

Thanks for any help.

[Leo]

Hi there,

1. You can use Tom’s Simple CSS plugin: https://docs.generatepress.com/article/adding-css/#simple-css
It gives you a CSS metabox in the Edit Page screen of each page. Then you would add this CSS:

.separate-containers .inside-article {
    background-image: background-image: url('URL TO THE IMAGE');
}

2. Not quite sure about this one. I’ll ask Tom to have a look 🙂

[Tom]

Mobile devices typically don’t do the fixed background image effect, as it can look pretty bad/laggy on mobile devices.

[Warwick]

Thanks for the responses.

Tom – in that case is it possible to set the background image differently for mobile? As it is currently I really like the effect for the laptop/desktop, but the image is stuck in the wrong position to be any use on mobile without scrolling?

Or possibly I should just stick with a plain background and take baby steps 🙂

[Tom]

You can definitely apply a different background on mobile:

@media (max-width: 768px) {
    .separate-containers .inside-article {
        background-image: url('URL TO THE IMAGE');
    }
}

Let me know if you need more info 🙂

[Warwick]

Thanks Tom – I may give it a try – however, honestly that starts scaring me 🙂 – I am rather technically inept sadly.

[Tom]

It’s not as scary as it looks 🙂

Just copy and paste, and the put the URL to your image in there.

[David]

Hi Tom,

question – i understand the issues with fixed bg images on mobile, so how did you manage to make this work when using the page headers? Is it that the Parallax uses JS?

If that is the case is it possible to use the parallax code on a section?

thanks

David

[Tom]

That’s correct. Sections also have an option to enable parallax 🙂

[Author]

Posts