After researching multiple solutions, I still can't figure out why my setup isn't working as expected.
The index.css file in my document is successfully creating a gradient background and the footer is functioning properly. However, the problem arises when I try to add an SVG as a semi-transparent background to the footer.
If I include the following code snippet, the background image appears but the opacity affects the entire footer:
const Foot = styled.footer `
position: relative;
margin: 0px;
padding-top: 2em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 2em;
color: white;
background-image: url('/logo.svg');
opacity: 0.25;
}
`
On the other hand, if I use this alternative approach to maintain the opacity only on the background image while keeping the rest of the footer opaque, the background image doesn't show at all:
const Foot = styled.footer `
position: relative;
margin: 0px;
padding-top: 2em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 2em;
color: white;
&::before {
content: "";
background-image: url('/logo.svg');
position: absolute;
opacity: 0.25;
}
}
`
How should I configure my setup so that the background image is semi-transparent without affecting the opacity of the rest of the footer?
Here is the JSX code for my footer in case it provides any insights:
<Foot id="footer-page">
<Div>
<div className="container">
<div className="row">
<div className="col-lg-4 col-sm-12 text-center">
<p className="lead">HUMAN RESOURCES SOLUTIONS></p>
<img className="img-fluid" src="/assets/images/wbe-seal.png" alt="certified women owned business seal" />
</div>
<div className="col-lg-4 col-sm-12 text-center"><p className="lead">FOLLOW US ON <Span orange>SOCIAL MEDIA</Span></p>
<A href="https://www.facebook.com" target="_blank" rel="noopener noreferrer"><i className="fab fa-facebook-square fa-3x px-2"></i></A>
<A href="https://www.instagram.com" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram fa-3x px-2"></i></A>
<A href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin fa-3x px-2"></i></A>
<A href="https://twitter.com" target="_blank" rel="noopener noreferrer"><i className="fab fa-twitter-square fa-3x px-2"></i></A>
</div>
</div>
</div>
</Div>
</Foot>