Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by rymatech
rymatech
4,671 Points

How do I greyscale and opacity the background image CSS without affecting other elements? (CSS ::before ??)

background-img is a div which wraps all of the other classes.

.background-img {
    height: 100vh;
    width: 100vw;
    opacity: 0.1;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    background: url(./assets/breakfast.png) no-repeat center center;
    background-size: cover;
}

.header-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.logo1 {
    height: 10vh;
    width: auto;
    margin: 1.5rem;
}

.logo2 {
    height: 10vh;
    width: auto;
    margin: 1.5rem;
}

.paragraph-img-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 5rem;
}

.main-paragraph {
    font-size: 2rem;
}

.loading-container {
    display: flex;
    justify-content: center;
}

1 Answer

Jonathan Huppi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jonathan Huppi
Front End Web Development Techdegree Graduate 42,048 Points
Jonathan Huppi
.a{fill-rule:evenodd;}techdegree seal-36
Jonathan Huppi
Front End Web Development Techdegree Graduate 42,048 Points

Add a container element i.e. div around the content that you don't want affected by the grayscale and opacity. Then add another container element around the .background-img element and the content container. In your css file set the .container element to position: relative; and the .content element to position: absolute; top: 0; left: 0;. 

<div class="container">
  <div class="background-img">
  </div>
  <div class="content">
    <!-- the content that you don't want to apply the grayscale and opacity to -->
  </div>
</div>

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
}