How to make a <div> background image manageable in MODx

:speech_balloon: I always find it hard to find the topic/article I need. Then I don’t know if it exists or if I’m just looking in the wrong place. :face_with_monocle:

MODX Revolution 3.0.3-pl

:mag_right: What I am looking for is a clear :footprints: step-by-step tutorial that walks me through the steps of placing a content-manageable background (bg) image in a div that is built with a clip-path. I need it for multiple (different) places on my website.

All I found online is this, and it does not make sense to me.
:arrow_down:
Add this to the CSS

body {background: white url(../bg-jpg) no-repeat top center;} body#home {background: white url(../bg-home.jpg) no-repeat top center;} body#about {background: white url(../bg-about-jpg) no-repeat top center;}

Add a Template Variable to the body tag

<body id=" [*backgroundess*]">

Make a TV in MODx

Go to Elements > Manage Elements > Template Variables > New Template Variable and fill in the fields like this:
Template Variable Name: backgroundcss

Input Type: text
Default Value: @INHERIT

Finally, assign the Template Variable to the template and click "Save".
Go in each page you want a different background and add the CSS id.

I also asked a friend :robot: it says;

To make a <div> background image manageable via MODx, you typically have a few different approaches depending on your specific requirements and how you want to manage the content.
.
Here’s a simple way to accomplish this:
.
. 1. Create a Template Variable (TV): In the MODx manager, go to the Elements menu and select Template Variables. Create a new Template Variable, let’s call it “BackgroundImage”. Set the Input Type to “Image” or “File”, depending on how you want to select the background image. Save the Template Variable.
.
.2. Assign the Template Variable to the Template: Edit the template that contains the <div> whose background image you want to manage. Add the Template Variable (BackgroundImage) placeholder to the template where you want the background image to appear.
.
.3. Apply the Background Image to the <div>: In the template or resource where your <div> is located, set the background image CSS property using inline style or by referencing a class. Use MODx tags to retrieve the value of the Template Variable and dynamically set the background image URL.

Here’s an example of how you might apply the background image to your <div> using MODx tags:

<div class="my-div" style="background-image: url('[[*BackgroundImage]]');">
    <!-- Content goes here -->
</div>

In this example, [[*BackgroundImage]] is the MODx tag that retrieves the value of the BackgroundImage Template Variable assigned to the resource using this template. The URL of the selected image will be inserted dynamically into the url() CSS function.
.
Once you’ve set up the Template Variable and updated your template or resource, users can manage the background image by editing the resource properties and selecting/uploading an image through the MODx manager interface.

Do you know how to do this or do you have the tutorial I need? Please let me know!

Hey @uxpascal

What version of MODX is your site using?

The first piece of information you found online is for MODX Evolution - which is very old now and not really supported on this forum.

Your friend :robot: has provided an answer that relates to MODX Revolution and is far more likely to be useful.

If you’re on MODX 2.x or above the bot’s answer should get you started.

1 Like

MODX Revolution 3.0.3-pl
Ill update the information in the question. :blush:

1 Like

It sounds like you’re close, but the body tag for MODX 3 should look like this:

<body id=" [[*backgroundcss]]">

Welcome to MODX :slight_smile:

1 Like

Thanks @bobray Looks like I should be able to create what I need now. Ill have a look later this week. :spiral_calendar: :blush: