[Support request] A different background image on each page

Home Forums Support A different background image on each page

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #330332
    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
    #330494
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #330498
    Leo
    Staff
    Customer Support

    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.

    #332808
    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

    #332818
    Mireille

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

    #332950
    Leo
    Staff
    Customer Support

    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!

    #333918
    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

    #333977
    Leo
    Staff
    Customer Support

    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

    #508707
    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

    #508809
    Leo
    Staff
    Customer Support

    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!

    #508829
    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

    #508837
    Leo
    Staff
    Customer Support
    #508944
    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

    #509218
    Leo
    Staff
    Customer Support

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

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

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