How do I greyscale and opacity the background image CSS without affecting other elements?

Question

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

I have tried using the ::before method but cannot get it to work either. If there are any other improvements I can make please let me know. thanks in advance

.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;
}

If its a `div` that wraps all others, its chlidren are going to inherit the `greyscale ` property. Use a different `div` for just the background effect and position it absolutely inside the `div`. — Anurag Srivastava, Jul 26 '19 at 17:16

score 0 · Answer 1 · answered Jul 26 '19 at 17:17

You'll need to do that by adding the background as pseudo element

.background-img {
    height: 100vh;
    width: 100vw; 
}
.background-img:after{
  content: '';
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
  background: url(https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png) no-repeat center center;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  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;
}

<div class="background-img">
  <div class="header-img-container">
    <img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
  </div>
    <div class="logo1">
    <img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
    </div>
</div>

How do I greyscale and opacity the background image CSS without affecting other elements?

1 Answers1