[Resolved] View: Background Image with Custom Fields over it

[Author]

Posts

[bassemK]

Hi there,

I have a very challenging view that I'm trying to achieve.

I have a custom post type called "Project"
this custom post type has 3 custom fields assigned to it.

1. Custom field image "Project Background Image"
2. Custom field text "Project Headline"
3. Custom field text "Project Subtitle"

for single posts of my custom post type, I want to achieve the same look in the frontend as shown in the attached pic.

Is it doable through Toolset and how can I do it?

Kind Regards,
Bassem

[Luo Yang]

Dear Bassem,

Yes, it is possible within Toolset, see below test site:
hidden link
user/pass: xgren/111111

Use below content template:
hidden link
codes:

<div class="my-banner" style="background-image:url([types field='project-background-image' size='large' url='true'][/types]);">
  <h2>[types field='project-headline'][/types]</h2>
  <h5>[types field='project-subtitle'][/types]</h5>
</div>

[bassemK]

Impressive! Thanks a lot Luo 🙂
that was really easy.

Best,
Bassem

[bassemK]

But how can I make the image full width similar to the attached pic in the very first beginning of this thread?

[Luo Yang]

This is a CSS question, you can modify the parameters of the background, for example:

<div class="my-banner" style="background:url([types field='project-background-image' size='large' url='true'][/types]) no-repeat center center;">
  <h2>[types field='project-headline'][/types]</h2>
  <h5>[types field='project-subtitle'][/types]</h5>
</div>

And it is only an example, you will need to customize the CSS codes as what you want.

More help:
hidden link
hidden link