A different background image on each page

[Mireille]

Hi there,

I would like to have a different background image on each page. I understand I can choose a featured image and make it full width, but then I have to have images with the text on it because the text cannot be placed in front of the image? And when I have images with the text on it, it is nog possible to place different links in the text.

And when I choose an image as background in the content area, it will be the same on all pages.

Can you please help me with this?

Thank you in advance!!

Mireille

GeneratePress 1.3.46

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mireille]

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

[Mireille]

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

[Leo]

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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mireille]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Staffan]

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

[Leo]

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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Staffan]

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

[Leo]

No problem!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Staffan]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christoph]

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

[Author]

Posts