0

I found this Post CSS-only Acrylic Material from Fluent Design System which is great but it has a big problem. When I try to use more then one background image it doesn´t work anymore, because the following piece of code is needed:

body, .acrylic::before {
 background: url("img1.jpg") center/cover;
 background-attachment: fixed;
}

But I want to use different background-images for page sections:

 body {
 background: #FFF;     
 }

.hero {
 background-image: url(img1.jpg);
}

.about {
 background-image: url(img2.jpg);
 }

I need to be able to use Acrylic material effect anywhere on the page, like this:

<body>
<div class="hero">
<h1>I´m a hero</h1>
<a href="#section">Scroll down link</a>
</div>
<div id=section class="about"><p>Section has different background image <span class="acrylic">but this content is on the Acrylic Fluent Design surface<span/></p><div/>
</body>

So I need Acrylic surface as a universal design component without the limitations of the original post. If somebody knows how to do it I will really appreciate any help. Thank you (And sorry for my bad writing - I´m not a native speaker so I hope you understand everything I wrote :))

Community
  • 1
  • 1

2 Answers2

1

The original answer to the question you link to states that:

Since we use same background for parent and children, we can club them together ;)

However this is not the case for your scenario, you actually want each element to have its own background, right? If I'm understanding you correctly, then you can remove this part of you css:

body, .acrylic::before {
  background: url("img1.jpg") center/cover;
  background-attachment: fixed;
}

Then to set the background for each section, plus the section's .acrylic background separately, see below:

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 50%;
  float: left;
}

.acrylic {
  padding: 4em 6em;
  position: relative;
  overflow: hidden;
}

.acrylic::before {
  filter: blur(10px);
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  z-index: -1;
}

.acrylic::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.35;
  border: 1px solid #fff;
  background: #fff;
  background-image: url(data:image/png;base64,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);
}

.shadow {
  border-radius: 1px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
}

/* From here down are the changes to the original answer */

.hero,
.about {
  position: relative;
  z-index: -1;
}

.hero,
.hero .acrylic::before {
  background: url("https://images.unsplash.com/photo-1427434991195-f42379e2139d?auto=format&fit=crop&w=1189&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") center/cover;
}
    
.about,
.about .acrylic::before {
  background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover;
}
<main class="hero">
  <div class="acrylic shadow">
    Acrylic material!
  </div>
</main>

<main class="about">
  <div class="acrylic shadow">
    Acrylic material!
  </div>
</main>
mwilshire
  • 96
  • 4
  • Yes you´re understanding correctly. But when I tried to do what you say it just didn´t work. The .acrylic div became unblurred just semi-transparent (because of the rgba used). Could you please make some working demo? I know you´re not here to do my code-work but I have to ask you. –  Nov 06 '17 at 12:00
  • Ah, I see now. I read the question you referenced in a bit more detail! See update with edited snippet from referenced question – mwilshire Nov 06 '17 at 18:42
  • This works, so I made it as an answer, but when I change the padding it gets broken again. Is it possible to make it more flexible for different types of usage? I know I asked for a usage in sections but I think I could use it on other places of the page too (navs, text, buttons etc.). I´m trying to make a simple framework or template for fluent design so I need as much flexible/universal solution as possible. Can it be done? Or maybe there are so big limitations of css? If you could help me again I would really appreciate. Thank you, anyway. –  Nov 07 '17 at 10:03
0

Could you try this, maybe it works:

hero, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}

about, .acrylic::before {
background: url("img2.jpg") center/cover;
background-attachment: fixed;
}

is it maybe possible that you provide a Screenshot how you wanna have it? :)