A different background image on each page

Hi there,

Are you wanting to change the body background image on each page? So the image that is shown behind all of your content/header/footer etc..?

Let me know :)

Hi there,

You can use the page header add-on if you want to add text/links in front of featured image:
https://docs.generatepress.com/article/page-header-overview/

As for different background images for the content area, try this CSS in the Simple CSS meta box on each page:

.inside-article {
    background-image: url('http://URL-HERE')
}

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

Let me know.

Hello Tom,

Yes, I would like a full width background image behind the content between the primary menu and the footer. And on each page a different image.

Is that possible?

Thank you for your help!

Kind regards,
mireille

And is it also possible to add several links on one image? Or just one per image?

Hi there,

For different background image on each page, try this CSS in the Simple CSS meta box on each page:

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

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

Not sure what you meant by adding links? Don't think there is away to add links to background images.

Maybe you are able to provide an example from other sites? Thanks!

Hi Leo,

Thank you for your support!

With the possibility to make sections I managed to have a different image on each page. In that way, I can place links everywhere I would like in the text and media.

But I would like a background image with a semi-transparant (opacity) block behind the text (content). Is that possible too? In the section I can choose a background color, but how do I choose semi-transparant?!
If that is possible, I guess my problems are solved.

Thank you again!

Mireille

So basically an color overlay on background image?

The easiest way would be to add the color directly on the image using a image editing software like Photoshop.

You could do it using rgba, but you would have to add an empty div inside each section and set some CSS to it:
https://generatepress.com/forums/topic/semi-transparent-image-overlay-for-sections-and-page-header/#post-158850

Hi. I also want different background on different pages. In my example I want a page with black background.
First I installed the plugin Simple CSS to be able to add code for a page.
Then I have added these both suggested codes - in different order and alone.
.inside-article {
background-image: url('http://.../black-line.jpg')
}
body {
background-image: url('http://.../black-line.jpg')
}

The background will be black, the content area is black except a white frame around it.
That frame seems to be the "padding" around content as can be set to zero in appearance/customize/layoyt/container but that is for the site overall.
Can I get rid of that "padding" frame ONLY for a specific page?
/Staffan

I believe this is what you are looking for: https://docs.generatepress.com/article/page-builder-container/

If not can you open a new topic for your question?

Thanks!

Hi.
Great - It works! In the page layout section you go to tab "Page builder contaniner" and choose full width option. Then background become black all over my page - as I want.
Thank you very much!
/Staffan

No problem!

Hi again. I dont find where to put a new qustion?
I'm running generate express premium. But now I can't find where to change the header or header image? There is no menu option anymore to change header content? What is wrong?
/Staffan

Once you logged in to your account, scroll to the bottom of this page to start a new topic: https://generatepress.com/support/

Hello again,

I am trying on this page: http://www.uepconsult.com/acerca-de-nosotros/

(1) I have put a background image with

body {
    background-image: url('http://www.uepconsult.com/wp-content/uploads/2018/03/uepnosotros.jpg')
}

BUT what is the optimal size for the image, so thats shown well on all screens? Or how can I make this background responsive?

and
(2) How can I make the container width smaller (just on this page) ?