Forum

Thread tagged as: Question, Forum, Docs

Background images in divs

Hello,

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

Martin Dady

Martin Dady 0 points

  • 7 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" />);">
...
</div>

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.

Thanks,

Martin

Drew McLellan

Drew McLellan 2638 points
Perch Support

That would go in your template.

Sussed it.

Great bit of software.

Many thanks,

Martin

This is very nice post thanks!


[url=https://www.pass4-sure.me]https://www.pass4-sure.me/[/url]

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