[Resolved] showing background image in a set of cells in layout

[Author]

Posts

[indianplayschools]

Tell us what you are trying to do?
I would like to set an image from post forms (filled by users) as a background image.
Is there any documentation that you are following?
I am following the real estate layouts
Is there a similar example that we can see? Code from Real estate Example
<style>
.property-header {
background-image: url([types field='property-photo' size='full' url='true'][/types])
}
</style>
What is the link to your site?
designsangam.com

[Luo Yang]

Hello,

Yes, it is possible to display a custom image field as background image, but in order to make the Types shortcodes working:
[types field='property-photo' size='full' url='true'][/types]
you need to put those custom CSS codes into post content as inline CSS codes. For example, if you are using Toolset Layouts plugin, you can put those CSS codes you mentioned above into Visual editor or Content template cell.

More help:
https://toolset.com/documentation/user-guides/content-template-cell/
https://toolset.com/documentation/user-guides/rich-content-cell-text-images-html/

If you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL, I can setup a demo for you.

[Luo Yang]

Thanks for the details, I have done below modifications in your website:
Edit the layout "Try designer", edit the visual editor cell:
1) Enable the option "Disable automatic paragraphs"
2) Change the codes as below:

<style>
.designer-header{
background-image: url([types field='featured-image' size='full' url='true'][/types])
}
</style>
<div class="designer-header">
<h2 style="color: white;">[wpv-post-title]</h2>
</div>

it is only a demo, for your reference.

More help:
hidden link

[indianplayschools]

Thank you.
I see two images. May I know why?
hidden link
I have added a featured image field (different from the one WordPress post has) in custom fields group of designers.
When I try to edit designer forms, I see two featured image fields. Maybe I added them sometime back. But, I am unable to delete them as I see a locked symbol beside them. When I change the status of Featured Image(created by me ) to Not required, I am able to delete one. But, I want the Feature Image field to be in the Required mode and would like to have only one featured image in Designer post form

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/when-i-try-to-edit-designer-forms-i-see-two-featured-image-fields-maybe-i-added-them-sometime-back/

[Luo Yang]

The CSS codes are applied to CSS class name "designer-header":

.designer-header{
...
}

So all HTML div tags with CSS class name "designer-header" will be applied the same background image.

I have checked the URL you mentioned above, there are three HTML div tags with the CSS class name "designer-header".
You can find them here:
hidden link
1) Edit the first visual editor cell:
in the content :

<div class="designer-header">
...

2) in section "Tag classes (optional)", see screenshot: ve1.JPG

3) Edit the second visual editor cell, in section "Tag classes (optional)"

For the other new questions, please check the new thread here:
https://toolset.com/forums/topic/when-i-try-to-edit-designer-forms-i-see-two-featured-image-fields-maybe-i-added-them-sometime-back/

[indianplayschools]

My issue is resolved now. Thank you!

[indianplayschools]

I have seen in the example that the background image fills the entire space beautifully. But, in my case, I get some gap all around. Do I need to add any code? Is this a styling issue?
hidden link

[Luo Yang]

It should be a CSS problem, I assume you are going to add CSS padding for text "Sirisha Allamneni", for example, you can modify the CSS codes as below:

<style>
.designer-header{
  background-image: url([types field='featured-image-sho' size='full' url='true'][/types]);
  padding: 50px; 
}
</style>

[indianplayschools]

I think I should know bootstrap, css and html well for knowing the layouts. I will try to achieve the desired layout through DIVi