I want to blur only the image but it affects everything

Question

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

What are you considering the image? Is there a class for the image? The CSS name is missing for the `background-image` Could you provide a markup photo or a relative reference so we can see the image? — Kameron, Sep 26 '21 at 20:40
Please check the code you have given, the CSS is missing at least the first line, maybe more, and make it into a working snippet that we can try out ourselves. — A Haworth, Sep 26 '21 at 20:56
Thank you guys for trying to understand and fix my scuffed code and I cannot believe that there's some people trying to help the begginers in there journey thank you but I tried the too answers and they worked — Khaled, Sep 26 '21 at 22:23

mr.Hritik · Answer 1 · 2021-09-26T21:19:37.843

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>

score 0 · Accepted Answer · answered Sep 26 '21 at 21:14

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>

I want to blur only the image but it affects everything

2 Answers2