[Support request] Individual images as specific backgrounds for each webpage I want….

Home Forums Support [Support request] Individual images as specific backgrounds for each webpage I want….

Home Forums Support Individual images as specific backgrounds for each webpage I want….

  • This topic has 4 replies, 3 voices, and was last updated 1 month ago by Elvin.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #2052416
    Robert Holland

    First goto https://robertdeanholland.com/magic-of-planet-janaidar/

    Then goto https://robertdeanholland.com/ancient-alien-technology/

    If you examine the URLs above, you will see images with text embedded inside the image using Photoshop. These do scale nicely on different screens like desktop versus smartphone, but–obviously–you cannot select the text. More importantly, web crawlers cannot parse embedded text for keywords–and this is a problem–not good.

    All I want to do is set an image on the chosen webpage as background to the GP Pro containers with text inside each container. I have done every combination of GP Pro container with Background Image URL set, and text overlaid, but it renders terribly on small screens. I would like to set a *.png image as background on the page to all of the containers with paragraphs inside.

    Is there any CSS, or snippet of code, I can set on each page I want that will allow me to have a background which is not inside the parent container, and then have containers with paragraph blocks holding text which web crawlers can parse?

    #2052779
    David
    Staff
    Customer Support

    Hi there,

    question – why not:

    a) add your text inside a Container Block.
    b) add a background image to the Container Block.

    Note you can put Container Blocks inside Container Blocks.

    It will provide you a lot more control over the positioning and sizing from within the editor.

    Let me know

    #2053090
    Robert Holland

    David, I did all that you suggest above, over and over and over as parent/child containers in as many different combinations as mathematically possible. Ying was unable to provide a solution in getting the container background to behave on the desktop rendering. We fixed the top text rendering, but the bottom text still overlapped the image. Worse, the rendering for small screen was a total kluge.

    And this is the third time I’ve come at this problem with GP Pro, and your support folks have failed to provide any solution.

    On this webpage https://robertdeanholland.com/magic-of-planet-janaidar/ the image of a medieval-scroll is a *.png file, and it has top be because it is not a uniform rectangle. The *.png allows the background to be seen through the image.

    Dave, if this is a bug in GeneratePress, or a true weakness, why won’t you folks admit it? And I tell you this, sir. Other themes support this page background, because a search on YouTube comes up with several hits. I watched one until I realized it was for a different theme.

    Can this be done in GeneratePress or not?

    #2053319
    Robert Holland

    Folks:

    Goto https://robertdeanholland.com/dramatis-personae/

    I found this snippet of code in a different GP Pro support thread, which seems to work.

    .inside-article {
    background-image: url(‘https://robertdeanholland.com/wp-content/uploads/2021/12/Pagoda-scaled.webp’)
    }

    Is there some way I can make it center the image named, Pagoda-scaled.webp, and not truncate it off the right side, i.e., make it fit.

    This is a pagoda with ball of energy on top which I want to use for the page background, but the code I have from GP Support truancates it on the right side

    #2054015
    Elvin
    Staff
    Customer Support

    Hi there,

    Try setting the background-color to “black” and set the background-size from “cover” to “contain”.

    But you may want to consider editing the image file itself as the graphic in it is not centered. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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