merch89 merch89 - 4 months ago 13
HTML Question

Adding a Background URL to an Advanced Custom Field

I am trying to add a background url to a DIV alongside an advanced custom field.
http://placehold.it/1000x500
Like this : Custom Fields for Div background images? (wordpress)

In the Advanced Custom Field I have tried text, wysiwyg, link picker...

However, when the page is loaded the / seem to be stripped out and "" are also in there.

Any ideas on getting this working

Here is the code I have tried:

<div class="clearfix featuresStrip homeBBanner-edit homeBBanner
style="background-image:url('<a href="<?php the_field('background_url'); ?>. </a>');">
style="background-image: url('<a href="<?php the_field('background_url'); ?>. </a>');">
style="background-image: url('<?php the_field('background_url'); ?>');">

Answer

I think you should test to set No formatting for this field as shown in the below screenshot:

enter image description here

One other thing that might be a problem is that you don't close the first attribute (class) in your element:

                                                               |
                                                               v
<div class="clearfix featuresStrip homeBBanner-edit homeBBanner style="

In fact, your entire markup looks suspicious, what are the anchor tag doing here background-image:url('<a href="<?php the_field('background_url'); ?>. </a>');?

Try changing your code to something along these lines:

<div class="clearfix featuresStrip homeBBanner-edit homeBBanner" style="background-image:url('<?php the_field('background_url'); ?>');">
...
</div>

The above assumes that the background_url field is plain text.