Skip Navigation

[Resolved] Use custom image field as background-image in CSS in a Loop

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use a custom field image as the background for each item in a loop, but for some reason the last loop image is applied to all loop items.

Solution: We do not recommend creating style tags in the Loop Output:

<style>...</style>

Since CSS is parsed all together and not iteratively, only the last style tag will be respected. All the others will be overridden. This is how CSS works, it is not a bug. Instead of creating style tags in the loop, consider adding overriding styles to an individual element in the loop:

<div style="background-image:url('[types field='athlete-background' size='full' url='true'][/types]')"> ... </div>

The inline style attributes will not be overridden by the final style attribute.

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

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 4 replies, has 2 voices.

Last updated by terryR 6 years, 8 months ago.

Assisted by: Christian Cox.

Author
Posts
#622067
Views-with-offset.png
page-inspect.PNG
Left-Right-Views.jpg
Left-Right-Taxonomies.jpg
CSS-for-backgrounds.PNG

Hello, I would like to ask you for a advice how to make different images which are using the same post field to loop and show the proper image on the current post in a View.

Currently for the page I am developing I have set the View for every single post which is using the same view to have offset and to show the proper image which is set for the post but when I open the page - it shows me the images which are set only for the first two posts of the Post Type ( both of the images - athlete background and athlete profile picture are set to be as background of the current View. )

This is the page which is developing to have this feature - hidden link

I am providing screenshots of how I have set the logic for the View please advice me if there is something to be fixed there to get it working. Thank you.

Kind regards.
Have a good and successful day!

#622279

Hi, the problem here is that CSS style tags aren't parsed and localized to their container element–they are parsed cumulatively. In other words, the browser waits until the page source is complete, then compiles all the original style tags together and applies the resulting styles to the entire page. Only the last rule applied to a class will be respected, because all the other rules are overridden by the last rule. Instead, apply these rules directly to each athlete section in the loop using the style attribute.

<div class="athlete-section-bg-1" style="background-image: url('[types field='athlete-background' size='full' url='true'][/types]')"> ... </div>
#622728

Thank you for the advice there.
Today I couldn't test the code but tomorrow I will try this method and tell if it works.

Have a good day, sir.
Cheers.

#622747

That's fine, I will mark this ticket as pending an update from you. No need to reply right now. The ticket will remain open for 30 days.

#624214

The issue is resolved the way @Christian Cox suggested.
Thanks again and have a great day!

The forum ‘Types Community Support’ is closed to new topics and replies.