Archived topic
Add background image behind text where image scales with text
5 replies · Started by Robert Holland on December 9, 2021
Go to https://robertdeanholland.com/sampling-of-magic/ to see the image of a scroll my illustrator drew. Under that is a container with the image in it as Background, and you can see the kluge. I've put a child container in the parent container and got the same result.
I've burned about 20-hours trying to get the image of a medieval scroll to sit behind the text-of-choice, then have the scroll be fully visible with the text on it. When I put an image into the Background of a container, I lose the top and bottom, simply gone. I tried padding the container, but when I get the top of the scroll to show, the image grows sideways off the container edge to disappear.
I added the plugin 'Simple CSS' and put this code snippet from another of your GP Pro Support pages:
body {
background-image: url('http://URL-HERE')
}
with the URL of the image pasted into the code snippet, but (as you can see) the scroll image showed up underneath my privacy statement, not on the page as background, and not behind the container with paragraphs in it. I've used columns. I've used grids. I've used gallery. Nothing works!
Maybe I should give up and put the text on the 'scroll image' using GIMP, then place the complete image (with text, which is not really text) inside each container on the page as an image? This seems clunky, but it would work. Is there better way?
Thanks....
Hi Robert,
I'm sorry, but I don't think I understand what you are trying to achieve, can you show me some screenshots with explanations?
Let me know :)
Ying, go to https://robertdeanholland.com/sampling-of-magic/ and look at the image of a medieval style scroll. As you can see, it is empty of text. This is because I cannot find an image-overlay block to allow text to sit on top of the image in GP Pro.
Let me know if you understand now.
Ah I see, try this:
1. Select this container block: https://www.screencast.com/t/W7HStMy3vzC
2. Try set this container block like this: https://www.screencast.com/t/hgABy3Csh3hH
3. And change the background image size to containinstead of cover: https://www.screencast.com/t/RBFUE2tdeuss
Let me know :)
Ying, once again go to https://robertdeanholland.com/sampling-of-magic/
We put the text inside the image using Photoshop, so it is not actual text, merely writing on the image as if it a photo of a physical scroll with writing on it. This also gives us control of the text appearance. This also scales perfectly on a cell phone screen, which is the real test.
Also, I did the scroll with web-text below that, just as you said, and the bottom text overlaps the background. I scaled the padding on the bottom up to 100-pxs, and web-text overlays the image at the bottom. Worse, the cell phone rendering blows this entirely to pieces and stacks the web-text into a tiny column.
The whole issue has been to simply get the text to live on the image and render well on cell phones. Maybe embedding the text inside the image is the easiest and simplest solution?
Yes, I guess using photoshop is the best way.
