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.
MODX Revolution 3.0.3-pl
What I am looking for is a clear 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.
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 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 theurl()
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!