Blur Img's & Div's in HTML Using CSS

How to blur ALL elements behind a div (text, shapes, buttons - not just the background image). CSS only if possible

I blurred by background image externally, and then took out the blur in css (as people told me to for performance reasons in the comments).

After doing that, and without changing anything else, now my blur works on the navbar! It seems to be that the background blur was messing up a bunch of stuff.

Thank you for the help in the comments!

P.S. The fixed positioning that didn't work before now works?!?

To blur an element with no background image by css

What you are looking for is backdrop-filter

body {  background-image: url(https://i.picsum.photos/id/174/800/800.jpg);  background-attachment: fixed;  background-size: cover;  height: 100vh;  margin:0;  position: relative;}

.parent-div {  position: relative;  height:50vh;  backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);}
<div class=" parent-div">  <div class=" child-div">    <h4 class=" text-light">Hello world!!</h4>  </div></div><div class=" parent-div">  <div class=" child-div">    <h4 class=" text-light">Hello world!!</h4>  </div></div>

How to blur background image of div, without blurring the remaining site or the content of the div

Here is the solution

<body><header class="intro">
  <div class="background-image"></div>
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading">Grayscale</h1>
          <p class="intro-text">A free, responsive, one page Bootstrap theme.
            <br>Created by Start Bootstrap.</p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
</body>

Css :

body {
    width: 100%;
    height: 100%;
    font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    background-color: black;
    margin: 0;
    padding: 0;
}

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
}

.intro .background-image {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.intro .intro-body {
  z-index: 9999;
  display: table-cell;
  vertical-align: middle;
}

how to add blurred images with text in html?

Try Considering This One:

Probably Might Help You.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="bg-image"></div>

<div class="bg-text">
  <h2>Blurred Background</h2>
  <h1>My car website</h1>
  <p>This is a blurred lamborghini</p>
</div>

<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>Blurred Background</h2>
  <h1>My car website</h1>
  <p>This is a blurred ferrari </p>
</div>

</body>
</html>

How to Blur part of an image in a box css

You may need 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.

backdrop-filter: blur(20px);

An amazing online demo: https://codepen.io/alphardex/pen/pooQMVp

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background: URL(); */
  background-size: cover;
  background-position: center;
}

.bgimage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72vw;
  height: 36vh;
  /* box-shadow: ; */
  backdrop-filter: blur(20px);
  transition: 0.5s ease;

  &:hover {
    /* box-shadow: ; */
  }

  .title {
    padding-left: 0.375em;
    font-size: 3.6em;
    font-family: Lato, sans-serif;
    font-weight: 200;
    letter-spacing: 0.75em;
    color: white;

    @media (max-width: 640px) {
      font-size: 2em;
    }
  }
}

Sample Image

Make blur effect with CSS in a div content

In modern browsers, you can use the backdrop-filter property and set it like this:

backdrop-filter: blur(5px);

For compatibility, see: https://caniuse.com/css-backdrop-filter

CSS: How to blur background image within the div?

Finally I worked out my solution:

But this solution must use javascript to get the position to feed back.

  1. We made a internal background layer .bg embed in the .box container.
  2. Resize the .bg as big as the body, so the background size is same.
  3. Set a negative marginTop and marginLeft to the .bg layer, according to the .box position. so the .bg image goes coincide with the body.
  4. Set a negative marginBottom to .bg, so the initial content in the box is placed back right.
  5. Remember to set overflow: hidden on .box， and then set the filter: blur(??px) on the .bg.

To keep the effect, you need to recall the style setting statement every time you moves the .box.

See demo also: http://jsfiddle.net/52mk6816/

$(function() {  function render() {    $('.bg').removeAttr('style').css({      width: $('body').width(),      height: $('body').height(),      marginLeft: -$('.box').offset().left - 11,      marginTop: -$('.box').offset().top - 11,      marginBottom: -$('body').height() + $('.box').offset().top + 11,    });  }  render();  // When the window resizes, or the `.box` moves/resizes, recall the `render` function.  $(window).resize(render);});
body {  background-image: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);  background-repeat: no-repeat;  background-size: cover;  margin: 0;  padding: 0;}.contain {  padding: 10px;}.box {  border: 1px solid #fff;  border-radius: 10px;  margin: 10px;  padding: 10px;  width: 200px;  overflow: hidden;}.bg {  position: relative;  background: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);  background-repeat: no-repeat;  background-size: cover;  z-index: -1;  -webkit-filter: blur(3px);  -moz-filter: blur(3px);  -ms-filter: blur(3px);  filter: blur(3px);  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="contain" align="right">  <div class="box">    <div class="bg"></div>    <h1>Header</h1>    <p>Paragraph. Something to write...</p>  </div></div>

Related Topics

How to Set Active Class to Nav Menu from Twitter Bootstrap

Jquery CSS Visibility with Animation

How to Set a JavaScript Onclick Event to a Class with CSS

Duplicating an Element (And Its Style) with JavaScript

Angular 4 - Scroll Animation

Prevent Select2 from Flipping the Dropdown Upward

Serving High Res Images to Retina Display

Correct Way to Apply Global Styles into Shadow Dom

JavaScript - Smooth Parallax Scrolling with Mouse Wheel

How to Append a CSS Class to an Element by JavaScript

How to Find Which JavaScript Is Changing an Element's Style

Can JavaScript Change the Value of @Page CSS

Cross Browser Rgba Transparent Background While Keeping Content (Text & Images) Non-Transparent

How to Make a Div Always Float on the Screen in Top Right Corner

Fast Image Loading Methods, Low to High Res with Multiple Backgrounds - JavaScript Solution

Bootstrap 3 Dropdown on iPad Not Working

Set Scrolltop and Scrollleft Without JavaScript

JavaScript Interface Not Working with Android 4.2


Leave a reply



Submit