Archived topic

Background image questions

8 replies · Started by Warwick on July 9, 2017

Viewing posts 1–9 of 9

July 9, 2017 at 9:52 am #346476

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.

July 9, 2017 at 3:28 pm #346614

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 :)

July 9, 2017 at 8:47 pm #346737

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

July 9, 2017 at 11:46 pm #346789

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 :)

July 10, 2017 at 10:48 am #347140

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 :)

July 13, 2017 at 7:43 am #348809

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

July 13, 2017 at 9:39 am #348903

It's not as scary as it looks :)

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

July 28, 2017 at 1:26 pm #356425

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

July 28, 2017 at 8:13 pm #356519

That's correct. Sections also have an option to enable parallax :)

This archived topic is closed to new replies.

Start building better websites today.