This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to use a featured image or a Toolset custom image field as the background image of an element in my View's loop.
Solution: Use dynamic sources in a Container block to set the background image using a featured image or custom image field.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 6 replies, has 2 voices.
Last updated by 3 years, 7 months ago.
Assisted by: Christian Cox.
Hi,
When creating a view, how can a background image be used using an image from the post. I have attached an example.
I am able to do this with the title above the image but I want it overlaid on the image which could be the featured or a toolset field upload.
Is this possible and if so can you point me in the right direction please?
Hello, when you create a View you can place a Container block in the loop, then set the background of that Container block to use a dynamic source like the post's featured image or a custom image field. Any content you place in that container will be displayed over the background image. I'm attaching a screenshot here showing an example of a Container block with a background image coming from the post's featured image field.
Does this help achieve what you are looking for?
The options "Auto", "Contain", "Cover", and "Custom" give you a few different options for resizing the background image. The option "Contain," for example, will resize the image proportionately so that the entire image is displayed in the available container without cropping. The option "Cover" will resize the image proportionately so that the entire space is covered, cropping out any overflow. "Custom" allows you to set a specific height and width for the image, scaling without maintaining the original image proportions. You can set the vertical and horizontal position of the background as well as repeating options if you want to use the image as a repeating pattern or "tile".
Is there a specific resize effect you're looking for?
