We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum


Thread tagged as: Question, Forum, Docs

Background images in divs


Would appreciate pointing in the right direction (e.g. tutorial or page) showing what I need to do to allow an editor to change a background image in a div.

Many thanks,


Martin Dady

Martin Dady 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Something like this?

<div style="background-image: url(<perch:content id="bgimage" type="image" label="Background image" />);">

Thanks for the prompt reply.

Where would this show up in the admin area? Under regions or somewhere else?

Really only starting to get to grips with this aspects despite using it in a simpler form for years.



Drew McLellan

Drew McLellan 2638 points
Perch Support

That would go in your template.

Sussed it.

Great bit of software.

Many thanks,


This is very nice post thanks!


Is there any way to output in addition the witdh and height to the html-data attribute? for example:

<div style="background-image:url('imagepath.jpg');" data-img-width="640" data-img-height="480">

ah ok, i found it.

Template Code:

<div style="background-image:url('<perch:content type="image" id="bgimage" label="Background Image" width="1800" height="1400" />');" data-img-width="<perch:content type="image" id="bgimage" width="1800" height="1400" output="w" />" data-img-height="<perch:content type="image" id="bgimage" width="1800" height="1400" output="h" />">

Yes. This would come from your template. Do you need an example or was this the answer you needed?

EDIT: looks like I need to type faster you replied in between.

Thanks Robert, we just posted at the same time. I found the solution by adding output="w" or output="h".

And shocks you gave all the credit to Drew. Lol. Glad you got it all worked out