How to have both background effect and position fixed [duplicate] - html

Question

This question already has an answer here:
How to have both position fixed and background-attachment fixed?
(1 answer)
Closed 2 years ago.
I have a parent div which is holding links called #linkHolder. I have its position:fixed. The links have a background which have a background-attachment: fixed to give it that nice background effect. Those two things seem to cancel each other out. Is there a way around this issue?
#linkHolder {
display: block;
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
overflow: hidden;
background-color: #1b242f;
text-align: right;
font-size: 22px;
width: 100%;
font-family: "Sansita Swashed";
}
ul li {
display: inline-block;
padding-right: 6%;
}
#homeLink {
background-image: url("/static/portfolioBackground/linkBackA.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
<div id="linkHolder">
<ul>
<li><a id="homeLink" href="/">Home</a></li>
<li><a id="aboutLink" href="/about">About</a></li>
<li><a id="serviceLink" href="service">Services</a></li>
</ul>
</div>
Here's the issue on codepen I am having.
https://codepen.io/webdev154676/pen/VwjNoRN
Here's what I would like to have with the background image, but with the #linkHolder as position fixed, it will not work. Please help, and thank you for your time.
https://codepen.io/webdev154676/pen/rNLgBVv

Answer 1

From your question I'm understanding that the issue is that the background image is a little more blurred than what you would like to have.
For that i sudjest you to try using the background-size attribute and play around with it giving some sizes in % like
#homeLink{
background-size:90% 100%;
}