BLUR BACKGROUND BEHIND DIV

Blur scrolling-div content behind an element using pure CSS

To blur the scrolling div content behind an element, the backdrop-filter css property is used. The div is assigned a backdrop-filter property and also given a slightly transparent background color (e.g rgba(255, 255, 255, 0.85))

HTML

div class='wrapper'> div class='box'>Whatever is behind this div is blurred out/div> /div> 

CSS

body  margin: 0; > .wrapper  max-width: 100vw; background-image: url(https://images.pexels.com/photos/5491161/pexels-photo-5491161.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-color: #cccccc; height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; > .box  position: fixed; top: 30%; left: 40%; color: #333; font-weight: bolder; width: 20%; padding: 1rem; border-radius: 5px; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px); -o-backdrop-filter: blur(4px); -moz-backdrop-filter: blur(4px); backdrop-filter: blur(4px); > 

Valid Example

A sample usage of this is to blur the div scrolling behind the navbar in an application. See the sample code below I hope this helps

Top comments (4)

Thank you for such a great little application of css. This is something that I will utilize time and time again but in many different ways! Amazing how many great little css tricks there are that are so simple to impliment if you know how, yet they are often powerful and affective. I believe somebody has mentioned the nav bar use case already, but I am mentioning it again! It is a great way to use this. You can alter it slightly and it opens up so many more innovative ways it can be used. Thank you to Miss Ayodele 😀 my new besty!

1 like Like Comment button

French web developer mainly but touches everything. Volunteer mod here at DEV. I learn VueJS at this moment and databases. — Addict to Cappuccino and Music

The blur is a nice design for navbar. I already integrated that on one of my project. Pretty cool!

3 likes Like Comment button

Источник

backdrop-filter

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Try it

Syntax

/* Keyword value */ backdrop-filter: none; /* URL to SVG filter */ backdrop-filter: url(commonfilters.svg#filter); /* values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* Multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* Global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; backdrop-filter: revert-layer; backdrop-filter: unset; 

Values

No filter is applied to the backdrop.

Formal definition

Initial value	none
Applies to	all elements; In SVG, it applies to container elements excluding the element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	a filter function list

Formal syntax

backdrop-filter =
none |

=
[ | ]+

=
|
|
|
|
|
|
|
|
|

=
url( * ) |
src( * )

=
blur( ? )

=
brightness( [ | ]? )

=
contrast( [ | ]? )

=
drop-shadow( [ ? && ] )

=
grayscale( [ | ]? )

=
hue-rotate( [ | ]? )

=
invert( [ | ]? )

=
opacity( [ | ]? )

=
sepia( [ | ]? )

=
saturate( [ | ]? )

Examples

CSS

.box  background-color: rgb(255 255 255 / 0.3); backdrop-filter: blur(10px); > body  background-image: url("anemones.jpg"); > 

html, body  height: 100%; width: 100%; > .container  background-size: cover; align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; > .box  border-radius: 5px; font-family: sans-serif; text-align: center; max-width: 50%; max-height: 50%; padding: 20px 40px; > 

HTML

div class="container"> div class="box"> p>backdrop-filter: blur(10px)p> div> div> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 31, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Blur Background Behind Elements in CSS

You can use the backdrop-filter property in CSS to blur the background image behind an element with a transparent background:

.background  background-image: url(castle.jpg) > .backdrop  backdrop-filter: blur(1); >

It applies to everything behind the element where the backdrop-filter is defined, therefore make sure you make the element at least partially transparent in order to see the result. This property is often used to blur out the background behind a popup.

Also, this not only works with blur , but with other filter functions as well.

.backdrop  backdrop-filter: brightness(50%); backdrop-filter: contrast(50%); backdrop-filter: drop-shadow(0 0 5px #000); backdrop-filter: grayscale(100%); backdrop-filter: hue-rotate(90deg); backdrop-filter: invert(100%); backdrop-filter: opacity(50%); backdrop-filter: sepia(100%); backdrop-filter: saturate(100%); >

10 Best Practices for Quickly Improving Your CSS Building scalable and manageable stylesheets CSS has its own nuances that can make or break your design. Here are 10 tips for CSS : best practices that can help you bring out the best from your styles. Learn More

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don’t spam. Unsubscribe anytime.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Resources:

📚 More Webtips

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don’t spam. Unsubscribe anytime.

• Unlimited access to hundreds of tutorials
• Access to exclusive interactive lessons
• Remove ads to learn without distractions

Recommended

How to Prevent Elements Receiving Click Events With CSS

How to Center Text Vertically and Horizontally in CSS

How to Dead Center Absolutely Positioned Elements in CSS

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don’t spam. Unsubscribe anytime.

Источник

CSS Blur Background Behind DIV

In this tutorial we will show you the solution of CSS blur background behind div, as we know css used to style html elements, here we used css internal method to create blur effect on background image using element.

Using blur effect we can display texts on dark color background so user can see texts clearly and also we can blur image directly but here we will see about create to cover particular area of background using element.

Step By Step Guide On CSS Blur Background Behind DIV :-

Here we used internal style method and in our program we sets background image using ‘background-image’ property to body element to cover screen size and defined one tag with class attribute ‘b’ because we used that class to define style element.

In element we defined to align center of background with size ‘width-80%, height-30rem’ and using ‘backdrop-filter’ property with blur value we blurred background image for particular size.

    body < background-image: url(bg.jpg); background-size:cover; background-repeat: no-repeat; width: 100%; height: 100%; >.b 

1. tag which is instruct the web browser about what version of HTML file written in.
2. The tag is used to indicate the beginning of HTML document.
3. As above shown tag is containing information about webpage and if you need any external file those links are declared here. tag is used for set the webpage title.
4. Here we defined style for body element, we sets ‘background-image’ and width and height of element size is ‘100%’ and the ‘background-size’ property value sets as ‘cover’ used to fit background image size to screen size and ‘background-repeat’ property used to avoid image repeat which is occur only when our image size is too small it will repeatedly display same image to fill element size so we have to sets to ‘no-repeat’ value.
5. When we defining style used id or class of particular element we have to use respective symbols ‘.(dot)-refers class attribute’ and ‘#(hash)-refers id attribute’ before name of id or class attribute.
6. In class (.b) we defined styles ‘display: block; margin: auto;’ used to align center of page, blur effect size cover 80% of width and 30rem of height, ’ box-shadow’ property used to highlight blur effect and ‘backdrop-filter’ makes blur visible.
7. Both and tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
8. tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
9. Here we sets background image on body element and defined tag used to display blur effect on webpage when we load on browser.
10. Both , tags closed respectively. tag indicates the end of body, Then tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to give blur background behind div using css.

When user loads this on browser we defined body background with blur effect will display on webpage.

It is mostly used when background had dark color our banner text not clearly display on that we can use this concept to make visible texts clearly to viewers.

We can also make different effects like brightness, grayscale and saturate. etc.

I hope this tutorial on CSS blur background behind div helps you and the steps and method mentioned above are easy to follow and implement.

Источник