CSS Blur on Background Image But Not on Content

CSS blur on background image but not on content

You could overlay one element above the blurred element like so

DEMO

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}

How do i make the background image blurry without affecting the top content?

If possible I would suggest to split up the parent element clan-profile and the background image.

You could do something like:

<section id="clan-profile">
  <div class="clan-image"></div>
  <div class="container">
    <div class="row pt-4 pb-4">
      <div class="col-12 col-md-6">
        <div class="row pb-1">
          <div class="col-12">
            <h2>Lorem Ipsum</h2>
            <h5>Lorem Ipsum</h5>
          </div>
        </div>
...

Then you could do the following css:

.clan-image {
  background-image: url("...");

  /* Add the blur effect */
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

Then you have a decision to make. You can either make the image absolutely positioned, or you can make the content absolutely positioned. Another solution is to use css-grid, and position the elements on top of each other, because grid allows for this.

Edit:
Added Example: https://jsfiddle.net/dw2Lq0zj/

Css blur on background image :hover but not on text

You can't blur a background image but you can blur elements or pseudo-elements.

Use the image as a background (so it's still in the CSS) of a positioned pseudo-element.

.article-image {  height: 150px;  width: 238px;}.article-image:before {  content: '';  position: absolute;  height: 100%;  width: 100%;  top: 0;  left: 0;  background-image: url(http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg);  -webkit-filter: grayscale(0) blur(0);  filter: grayscale(0) blur(0);  transition: .4s ease-in-out;}.article-image:hover:before {  -webkit-filter: grayscale(100%) blur(2px);  filter: grayscale(100%) blur(2px);  transition: .4s ease-in-out;}.ar-image {  position: relative;  width: 238px;  height: 150px;}.article-image > p {  display: none;}.article-image:hover > p {  position: absolute;  top: 40%;  display: block;  color: #ffffff;  font-size: 16px;  font-weight: bold;  z-index: 9999999;  width: 100%;  height: 100%;  text-align: center;  transition: .4s ease-in-out;}

<div class="ar-image">  <div class="article-image">    <p>Lire plus</p>  </div></div>

How do I make the background image for my page blurry without affecting any of the other content on the page?

After body, you need to add a<div>tag with the css property:backdrop-filter: blur (1px);before the rest of the page.

Here's an example:

body {
  margin: 0;
  padding: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/1024px-NGC_4414_%28NASA-med%29.jpg');
  color: #fff;
  width: 100%
}

main {
  width: 50%;
  border: 5px solid red;
}

#amazing__filter{
  backdrop-filter: blur(4px);
  background: #ffffff20;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}
footer {
  width: 100%;
  height: 40px;
}

<html>
  <head>
  </head>
  
  <body>
    <div id="amazing__filter">
      <main>
       <header>
        <h1>
         A spectacular solution to the problem
       </h1>
      </header>
       <h2>
         List of the same words to fill the page
       </h2>
       <ol>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
        </ol>
      </main>
      <aside>
      </aside>
      <footer>
       <p>Footer</p>
      </footer>
    </div>
  </body>
</html>

css blur technique only for the background

You have to use two different containers, take a look here it will help you:

https://stackoverflow.com/a/20039965/4298050

I want to blur only the image but it affects everything

Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.

That way only the image gets blurred, not everything else.

body {
  font-size: 15pt;
  width: 500px;
  height: 500px;
}

body::before {
  background-image: url("https://picsum.photos/id/1015/1024/768");
  filter: blur(8px);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  content: '';
  z-index: -1;
}

.trbp {
  width: 500px;
  height: 40px;
  border: black;
}

.trb {
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
  display: inline-block;
}

.btp {
  position: relative;
  top: 120px;
  left: 30px;
}

.bth {
  position: relative;
  top: 100px;
  left: 30px;
}

.blb {
  position: relative;
  top: 80px;
  left: 60px;
  border-radius: 4px;
  background-color: #0731D2;
}

<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
  <h2 class="btp">welcom to</h2>
  <h2 class="bth">our site</h2>
  <button class="blb">about us</button></div>
<script src="main.js"></script>

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;
}

CSS Blur on Background Image But Not on Content