General Questions/New to Joomla! 4.x • Re: Text over image in JCE

Hi,

that´s easy:

Adding large white text over an image in Joomla using the JCE Editor can be achieved in a few straightforward steps. Here’s how you can do it:

1. **Upload and Insert the Image**:
- Open the JCE Editor where you want to add the image.
- Click on the “Image” icon to open the image manager.
- Upload your image if it isn't already uploaded, then select the image and click on the “Insert” button.

2. **Add a Text Layer Over the Image**:
JCE does not natively support adding text directly on images. You will need to use a workaround by creating a layer over the image or using custom HTML/CSS:

**Option A: Using a Module or Custom HTML**
- You can use a Joomla module that supports text overlays such as a slideshow or custom HTML module. These modules allow you to place text over images and position it accordingly.
- Install and use a module where you can insert both text and images, and position the text over the image.

**Option B: Using Custom HTML and CSS**
- Go back to your article or custom module and switch to HTML view in JCE.
- Add the following HTML and CSS snippet around your image code:

----------------------
<div style="position: relative; text-align: center; color: white;">
<img src="your-image-url.jpg" alt="Descriptive Text for Image" style="width: 100%;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: white;">
Your Title Here
</div>
</div>
----------------------

- Replace `"your-image-url.jpg"` with the URL of your image.
- Adjust `"Your Title Here"` with your desired text.
- Modify the `font-size` and other styles to suit your preferences.

3. **Preview and Adjust**:
- Save your changes and preview the article or module to ensure the text appears as desired over the image.
- Adjust the CSS styles if needed to better center the text or change its appearance.

Best,
Jan

Statistics: Posted by cms-4all — Mon Apr 22, 2024 3:48 pm

---