How to blur and align a div image correctly

July 27, 2022

I’m trying to blur the background image by keeping it left aligned with the main_container. I was suggested to follow this post How to apply a CSS filter to a background image and I figured out how to blur the background image without that covers everything. But then I can’t align it to the main_container, can someone help me figure out what am I wrong?

I must necessarily keep the background inside the html because in reality the url is a php variable that I could not put in the style sheet. The way I tried to align the main_container left doesn’t work from the moment the page changes size. Also the right_container should have the same width as the box_right.

This is how I would like it to be aligned, but if I then blur, the blur covers everything.

.main_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
  padding: 20px;
  border-radius: 6px;
  background: #f5f5f5;
  border: 1px solid blue;
  margin: 20px;
}

.prdimg {
  border: 1px solid blue;
  height: 80vh;
  width: 300px;
  background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  
  
}

.left_container {
  width: 70%;
}
.box_left {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.right_container {
  width: 30%;
  margin: -20px;
  padding: 20px;
  border-radius: 0px 6px 6px 0px;
  position: relative;
}

.box_right {
  width: 30%;
  padding: 20px;
  z-index: 999;
}

<div class="main_container">
            <div class="left_container">
              <div class="box_left">
                  <h1>Some title here!</h1>
                <p class="info-post-purchuase t2-light">
                  Some thext here
                </p>
              </div>
            </div>

            <div class="right_container" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'> 
              <div class="box_right">
                <div class="prdimg"></div>
              </div>
             </div>
          </div>

This is what I am trying to do

.main_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
  padding: 20px;
  border-radius: 6px;
  background: #f5f5f5;
  border: 1px solid blue;
  margin: 20px;
}

.prdimg {
  border: 1px solid blue;
  height: 100vh;
  width: 100vh;
  background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  
  
}

.left_container {
  width: 70%;
}
.box_left {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.right_container {
  width: 30%;
  margin: -20px;
  padding: 20px;
  border-radius: 0px 6px 6px 0px;
  filter: blur(5px);
  position: relative;
  right: -240px;
  background-size: cover;
  background-repeat: no-repeat;
}

.box_right {
  width: 30%;
  padding: 20px;
  z-index: 999;
}

<div class="main_container">
            <div class="left_container">
              <div class="box_left">
                  <h1>Some title Here!</h1>
                <p class="info-post-purchuase t2-light">
                  Some thext here 
                </p>
              </div>
            </div>

            <div class="right_container" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'> </div>
              <div class="box_right"> 
                <div class="prdimg"></div>
              </div>
             
          </div>

>Solution :

something like this ?

.main_container {
  position:relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
  border-radius: 6px;
  background: #f5f5f5;
  border: 1px solid blue;
}

.left_container {
  width: 60%;
}
.box_left {
  width: 70%;
  margin:20px;
  display: flex;
  flex-direction: column;
}

.right_container {
  width: 40%;
  border-radius: 0px 6px 6px 0px;
  position: relative;
}
.box_right {
  width: 30%;
  padding: 20px;
  z-index: 999;
  position: relative;
}

.prdimg {
  border: 1px solid blue;
  width: 10rem;
  height: 15rem;
  background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
  background-size: cover;
  background-repeat: no-repeat; 
}

.blured-img{
  background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
  background-size: cover;
  background-repeat: no-repeat; 
  position:absolute; 
  top:0; 
  height:100%;
  width:100%; 
  filter:blur(5px)
}

<div class="main_container">
            <div class="left_container">
              <div class="box_left">
                  <h1>Some title Here!</h1>
                  <p class="info-post-purchuase t2-light">
                    Some thext here 
                  </p>
              </div>
            </div>

            <div class="right_container"> 
               <div class="box_right"> 
                <div class="prdimg"></div>
              </div>
              <div class="blured-img">
              </div>
            </div>         
</div>