CODEWITHSUNDEEP
htmlcss
Anthony
Anthony

Reputation: 56

How to have both position fixed and background-attachment fixed?

I have a parent div which contains links called .linkHolder. The parent div has a position fixed to keep it in place as one scrolls. There are backgrounds to each link and these backgrounds have a background-attachment: fixed which are called #homeLink, #aboutLink, and #servicesLink. These two things seem to cancel each other out. I want to able to scroll while the .linkHolder stays in place and the background keeps its nice background image affect. Here is the html and css. Thank you.

<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>

The css

.linkHolder {
   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";
}
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;
}

Upvotes: 1

Views: 63

Answers (1)

Muscalu
Muscalu

Reputation: 11

You used . instead of #. This should work.

#linkHolder {
   position: fixed;
   top: 0;
   width: 100%;
}

Upvotes: 1

Related Questions