Return to previous page

CSS for footer to cover an image with a transparent layer

This topic has 4 replies, 2 voices, and was last updated 5 months ago ago by Luca Rossi

Amir

Participant

June 18, 2024 at 16:23

Hey

Is there any CSS that I could use to for footer to cover an image with a transparent layer. I have imported an image into the footer which works fine. I use white text and wanted to put a dark transparent layer so that the writing stood out. Doing a test site:
http://www.manzilbanqueting.com/homevs

Please, contact administrator
for this information.

#400339 Copied Theme version: 9.3.11

3 Answers
Luca Rossi

Support staff

June 19, 2024 at 04:41
Hi @Amir,

1. For the overlay background color, please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.et-footers-wrapper footer.footer {
    position: relative;
}
.et-footers-wrapper footer.footer::before {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
```
2. What do mean header cover the slider? We don’t see it cover on our end: https://prnt.sc/iiUTCkU_A9pq

3. Does x Store not have a good filterable gallery option?
> You can try with the Gallery element then select Multiple Gallery: https://prnt.sc/0RJNnhJ6oL58

Best Regards,
8Theme’s Team
#400378 Copied
Amir

Participant

June 19, 2024 at 13:41

Hi

Please contact administrator
for this information.

#400479 Copied

Luca Rossi

Support staff

June 20, 2024 at 07:05

Dear Amir,

We recommend utilizing the XStore: Gallery Element for your requirements. It is functioning properly on our end. Please access it through the following links:

– [XStore: Gallery Element](https://prnt.sc/Ijv5XRzlucXb)
– [Additional Information](https://prnt.sc/z_hSEAIwD_P3)

Should you need further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

#400595 Copied
Tagged: advanced css wordpress, css footer techniques, transparent layer images, woocommerce footer design, woocommerce themes, wordpress customization, wordpress theme development
Viewing 4 results - 1 through 4 (of 4 total)