Custom CSS to make a transparent layer over an image?

1 Views

I’m currently working on a website for school, and I want to use a certain image in the footer of this site. The image makes text hard to read, so my solution is to make a transparent cover layer that is slightly opaque if that makes sense. As of right now I have simply changed the background color of the container in the Firefox inspector and it has worked, but obviously that’s only in my browser.

This is all that I had to change:

Read More

From 

.footerclass {
background-color: transparent;
}

To 

.footerclass {
background-color: rgba(0, 0, 0, 0.33);
}

This is the result:
enter image description here

But when I go into the Custom CSS field in my WordPress dashboard and add it, it doesn’t do anything. I’m thinking that I’m not choosing the right selector when I’m doing this, or something. I’m relatively new to website design so I’m sorry if I come off as ignorant. Any help would be greatly appreciated.

The link to the page if you want to inspect it yourself is www.bightbanquets.com/

Post Views: 1

Related posts

1 comment

  1. Try this:

    .footerclass {
    position: relative;
}
.footerclass:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
}

Comments are closed.