Html Question posted in
Some basic documentation can be found here.

Html – How to get a background image that's not blurred inside a container but blurred outside

I’m trying to get the image inside my login form not blurred but keep the background outside of the login form blurred
What I’m trying to do

What I currently have

Tried backdrop filter and etc

.bg-image {
    position: fixed;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    background-image: url("https://i.ibb.co/DWvpCWD/login-bg.jpg");
    filter: blur(3px);
    -webkit-filter: blur(3px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-text {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 40px;
    display: flex;
    justify-content: center;
    border-radius: 3px;
    width: 90%;
    max-width: 300px;
}
<div class="bg-image"></div>
<div class="bg-text">
    <div class="row">
        <div class="login-register">
            <a href="/login" class="active">Login</a>
            <a href="/register">Register</a>
        </div>

        <div>
            <form action="post" class="form">
                <div class="input-group">
                    <label for="username">Username</label>
                    <input type="text" name="username">
                </div>
                <div class="input-group">
                    <label for="password">Password</label>
                    <input type="password" name="password">
                </div>

                <div class="checkbox">
                    <input class="checkbox-effect checkbox-effect-1" id="get-up-1" type="checkbox" name="remember">
                    <label for="get-up-1">Remember Me</label>
                </div>

                <button type="submit">Login</button>

                <a class="forgot-password" href="">Forgot Password?</a>
            </form>
        </div>
    </div>
</div>

Trying to get the image that’s behind the .bg-text container to not be blurred

Tags:

2

Answers


  1. 0

    One hack is using the same image as a bg-image for div.bg-text element (as @Ali Sheikhpour also suggested).
    Based on the image you provided, background-size of 1780px seems just right.
    Check out below, edited, snippet.
    But it is not a best solution. On the codepen 1780px seems the right bg-size while on the stackoverflow run code snippet > full page 1990px seems the right bg-size. You should test it out on various screen sizes,
    and if you make the main background responsive, you should do the same with text-bg element’s bg-image size.

     .bg-text {
        background-image:   url("https://i.ibb.co/DWvpCWD/login-bg.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 1780px;
       /*  rest of the code */
     }

    .bg-image {
    position: fixed;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    background-image: url("https://i.ibb.co/DWvpCWD/login-bg.jpg");
    filter: blur(3px);
    -webkit-filter: blur(3px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-text {
    background-image:   url("https://i.ibb.co/DWvpCWD/login-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1780px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 40px;
    display: flex;
    justify-content: center;
    border-radius: 3px;
    width: 90%;
    max-width: 300px;
}
    <div class="bg-image"></div>
<div class="bg-text">
    <div class="row">
        <div class="login-register">
            <a href="/login" class="active">Login</a>
            <a href="/register">Register</a>
        </div>

        <div>
            <form action="post" class="form">
                <div class="input-group">
                    <label for="username">Username</label>
                    <input type="text" name="username">
                </div>
                <div class="input-group">
                    <label for="password">Password</label>
                    <input type="password" name="password">
                </div>

                <div class="checkbox">
                    <input class="checkbox-effect checkbox-effect-1" id="get-up-1" type="checkbox" name="remember">
                    <label for="get-up-1">Remember Me</label>
                </div>

                <button type="submit">Login</button>

                <a class="forgot-password" href="">Forgot Password?</a>
            </form>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Have two background elements layered on top of one another. The one at the back is not blurred. The one on top is blurred, but has the central area masked with a pair of linear gradients, so the unblurred background beneath shows through.

    body {
  margin: 0;
}

.d1, .d2 {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(http://picsum.photos/id/28/1920/1080);
  background-size: cover;
}

.d1 {
  z-index: -2;
}

.d2 {
  z-index: -1;
  mask-image: linear-gradient(black 0%, black 25%, transparent 25%, transparent 75%, black 75%, black 100%), linear-gradient(90deg, black 0%, black 25%, transparent 25%, transparent 75%, black 75%, black 100%);
  filter: blur(4px);
}

.login {
  position: fixed;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border: 2px solid rgb(255 255 255 / 0.7);
  background: rgb(0 0 0 / 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
    <div class="d1"></div>
<div class="d2"></div>
<div class="login">Username<br>Password<br>etc</div>

    After running this snippet, use the full page link for best results.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search