I want to blur only the image but it affects everything [duplicate]-CodePudding

I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML</title>
  
  <!-- HTML -->
  

  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
 <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>
</body>
</html>

Here's the css to help

    font-size: 15pt;
    width: 500px;
    height: 500px;
    background-image: url("bto.jpg");
    filter: blur(8px)
}
.trbp{
  width: 500px;
  height: 40px;
  border: black;
}
.trb{
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
}

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

CodePudding user response：

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>

CodePudding user response：

Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.

body, html{
width: 100%;
height: 100%; 
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
  background-image:url('https://placeimg.com/1000/1000/people'); 
  width:100%; height:100%;
  -webkit-filter: blur(5px);z-index:0;
  position:absolute;
  background-position: center;
  background-size:cover;
  z-index:-10;
 }
 
.trbp{
  width: 500px;
  height: 40px;
  border: black;
}
.trb{
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
}

.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="bgImageContainer">
</div>

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

You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.

body {
    margin:0;
    padding:0;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
}
body:before {
    content: "";
    position: absolute;
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
    background-size: cover;
    height:100%;
    z-index: -1000; /* Keep the background behind the all your content */  height: 20%; width: 20%; 

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(1px);
}


.trbp{
  width: 500px;
  height: 40px;
  border: black;
}
.trb{
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
}

.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>