0

I was looking for how to generate the new glass morphism effect with CSS3. Afortunatelly I found This article that make it happens. In the first method the article makes something like this (I wrote this code with the same structure and properties):

body {
    min-height: 100vh;
    background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed; /*<------ This is the most important part*/
}

.contenedor {
    width: 500px;
    border-radius: 10px;
    height: 400px;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    background: inherit; /*<------- Here the ".contenedor" element inherits its parent's background*/
  z-index: 2;
}
.contenedor::before {
  z-index: -1;
    content: "";
    background: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 2000px rgba(255, 255, 255, 0.5); /*<------- Here the magic happens making a blur inside */
    filter: blur(10px);
}

With this HTML:

<body>
  <div class="contenedor">
    TEXT INSIDE
  </div>
</body>

Now, I don't understand how the background-attachment works to mantain the background in the .contenedor element with inherit background.

I know that the background:inherit is to inherit all background properties from its parent, but what happen if I put

{
    ...
    background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
    background-size: cover;
    background-attachment: fixed; /*<------ This is the most important part*/
    ...
}

instead inherit, It doesn't work. PDT: Of course I understand the ::before pseudoclass to achieve the background and I'm using the first methos instead the second because is not compatible with Mozilla Firefox

Thank you all and sorry about my poor English

JORGE GARNICA
  • 1,016
  • 2
  • 9
  • 13
  • your question is not clear. You want to understand how it works or why it doesn't work without inherit? – Temani Afif Feb 24 '21 at 19:25
  • Thank you for your response, the code works, I would like to know why... I can't undersdant the point of background-attachment fixed because I have been used it just for parallax effect you know. Thanks – JORGE GARNICA Feb 24 '21 at 21:10

0 Answers0