[Support request] background images

Home Forums Support [Support request] background images

Home Forums Support background images

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #304024
    Steig

    Hello,

    I’d like to set up a landing page that will look different than the styling from the regular web pages. On the page I’m envisioning, I’d like a background image that I can “float” other images and text over. I’ve watched your Generate Backgrounds #1 video, but don’t see how to use the background controls for only that single page (vs the whole site).

    How can I go about doing this?

    Thanks

    GP Premium 1.2.96
    #304029
    Leo
    Staff
    Customer Support

    Hi there,

    Try using CSS like this and replace the .page-id-xx with the actual page ID:

    .page-id-xx body {
        background-image: url('http://IMAGE-URL-HERE');
    }

    Or if you are using Simple CSS then you can just add this to the Simple CSS metabox of that page:

    body {
        background-image: url('http://IMAGE-URL-HERE');
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/#simple-css

    Let me know if this is what you wanted.

    #304031
    Steig

    generally that is the direction. Once the background image is there, can I “pin” images/text to specific locations on it? So that as the underlying background image resizes, depending upon screen size, the images/text I’m floating on top of it will move around?

    #304045
    Leo
    Staff
    Customer Support

    Hmm I don’t think that’s possible actually. Maybe if you use a page builder.

    Background images are also not responsive by nature so I don’t think that would work either.

    Will ask Tom to confirm 🙂

    #304055
    Leo
    Staff
    Customer Support

    If you can provide an example of some other site doing this it might help too.

    #304266
    Steig

    A good example is netflix.com. I’d like to build something quite similar. Big image on top with text overlays. And then menus items at the lower portion that bring up more choices even further below and adjusts the browser downward to bring focus on them.

    #304293
    Leo
    Staff
    Customer Support

    ahh that’s more like a page header. It would definitely take some custom CSS to make it like that but this should get you started: https://docs.generatepress.com/article/page-header-overview/

    Let me know if you need more info.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.