[Support request] background images

[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

[Leo]

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.

[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?

[Leo]

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 🙂

[Leo]

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

[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.

[Leo]

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.

[Author]

Posts