Add div with background image?

4 posts by 2 authors in: Forums > CMS Builder
Last Post: April 19, 2017   (RSS)

By Toledoh - April 19, 2017

Hey All.

I need to have a CMSB user be able to add an image via WYSIWYG, but have it generate

<div class="cyclotron" style="background:url(panorama.jpg);height:512px"></div>

I was thinking of possibly adding the image as normal, then giving it a class of "cyclotron", so it would be like

<img class="cyclotron" src="url(panorama.jpg)" />

Then having some kind of string_replace?

Any ideas?


Tim (

By ross - April 19, 2017

Hi Tim.

I think setting a background image via your WYSIWYG editor is going to be tricky.

Why does it need to be done this way? 

Could you look at having a separate upload field specifically for the background image?  It will be much easier to access the image in your code that way.

Let me know what you think.


Ross Fairbairn - Consulting

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting:

By Toledoh - April 19, 2017

Yeah, has to be via wysiwyg so they can place the content where they like on the page, and have multiple per text field. 


Tim (

By Toledoh - April 19, 2017

Would something like this work?

$str = '<img class="cyclotron" src="url(panorama.jpg)" />';

$str = preg_replace('<img class="cyclotron" src="url(.*?)" />', 'div class="cyclotron" style="background:url($1);height:512px"></div', $str);

echo $str;


But I also expect that if this does in fact work, it would only work for a single occurrence?


Tim (