CODEWITHSUNDEEP
cssbackground-image
Matthew Piziak
Matthew Piziak

Reputation: 3520

Obscure a div with an image in CSS

Is there a way to fake a foreground-image analagous to a background-image in CSS? Instead of existing behind other elements in a div, it would obscure everything inside the element.

Upvotes: 1

Views: 3618

Answers (4)

Roman
Roman

Reputation: 21785

You can use one line of css > backdrop-filter: blur(1rem);:

<div class="some-background">
  <div style="backdrop-filter: blur(1rem);"></div>
</div>

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

You can overlay a same-size child element with absolute positioning and add a bg image to it.

jsfiddle example with bg color instead of an image. Tested in FF, Chrome, IE9.

Upvotes: 0

Zeta
Zeta

Reputation: 105885

Use a pseudo-element (::before won't work in IE≤7):

.obscured{     
    position: relative;
}
.obscured::before{
    position: absolute; /* maximize the pseudo-element */
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color:rgba(0,0,0,0.3); /* use background-image here */
    content: " "; /* it needs actual content, an empty space is enough */
}

See also:

Upvotes: 6

epsilones
epsilones

Reputation: 11609

On way is to use absolute positionning, to cover all the tags. I presume you want to trigger this with an event. So when the event is triggered, you can float all the elements except the foreground

Upvotes: 0

Related Questions