So I've got a blurred image div for my login on the web page im making.
Here is what it looks like so far:
Now, the blurred part of the image is only supposed to be in the middle of the page with my dimensions as shown in the SCSS below:
//Variables
$background_image: url(../img/bg.png);
$background_fallback: #C0C0C0;
body {
padding: 0; margin: 0;
background-image: $background_image;
background-position: 0px 0px;
background-repeat: repeat;
color: #333;
animation: bg 40s linear infinite;
min-height: 100%;
width: 100%;
}
.login_container {
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 40%;
height: 60%;
.login_container_bg {
position: fixed;
left: 0; right: 0; z-index: 1;
display: block;
background-image: $background_image;
width: 100%;
height: 100%;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
animation: bg 40s linear infinite;
}
.login_container_inner {
position: fixed;
left: 0; right: 0;
z-index: 2;
margin-left: 20px; margin-right: 20px;
}
}
@keyframes bg {
from { background-position: 0 0; }
to { background-position: 0 1000px; }
}
Here is the HTML structure I used:
<body>
<div class="login_container">
<div class="login_container_bg"></div>
<div class="login_container_inner">
Hello. It's me.
</div>
</div>
</body>
As you can see the blur part of the background spreads the width of the page. I want the blur bit to only be the width and height of the inner - which should be 50% and 50% (x, y) of the page
The position of the element is fixed
to left:0
of the viewport, not the container. - fixed The element is positioned relative to the browser window http://www.w3schools.com/cssref/pr_class_position.asp
Either change it to be positioned absolutely (relative to the container) or position it fixed relative to the viewport.
Edit: Try something like this.
HTML
<div class="login_container_bg">
<div class="login_container_inner">
Hello. It's me.
</div>
</div>
CSS
.login_container {
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: $background_image;
.login_container_bg {
position: absolute;
left: 50%;
top: 50%;
transform:translateX(-50%) translateY(-50%);
z-index: 1;
display: block;
width: 40%;
height: 60%;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
animation: bg 40s linear infinite;
}
.login_container_inner {
position: absolute;
left: 0; right: 0;
z-index: 2;
margin-left: 20px; margin-right: 20px;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.