CODEWITHSUNDEEP
htmlcss
Ethereal soul
Ethereal soul

Reputation: 729

css tricks for background image blur

i want to blur the background image only but it has made the content blur also and i tried to set up the z-index i guess its not working here is the html and i need the solution with explanation please:

    <!DOCTYPE html>
<html>
<head>
    <title>Student-login</title>
    <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="body">
        <div class="main-form">
            <h1>Student Login</h1>
            <form class="login">
                <input type="text" placeholder="*User name" name="user_name"></input><br>
                <input type="password" placeholder="*Password" name="user_name"></input><br>
                <input type="button" value="Login"></input><br>
                <div class="button"><a href="register.html">Register</a></div>
            </form>
        </div>
    </div>
</body>
</html>

here is the css file:

.body{

            position: absolute;
            top: -20px;
            left: -20px;
            right: -40px;
            bottom: -40px;
            width: auto;
            height: auto;
            background-image: url("background.jpg");
            background-size: cover;
            -webkit-filter: blur(5px);
            filter:blur(5px);
            z-index: 0;
}
h1{
    font-family: 'Shadows Into Light', cursive;
    color: #282828;
    text-align: center;
    margin: 2%;
}
.main-form{
    float: right;
    margin-top: 3%;
    height:auto;
    border-radius: 3px;
    background:#F0F0F0;
    opacity: .6;
    padding-top: 1%;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 1%;
    z-index: 1;
}
.login input[type="text"]{

    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
}
.login input[type="text"]:focus{

    border: 1px solid #0033FF;
}

.login input[type="password"]{

    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
}
.login input[type="password"]:focus{

    border: 1px solid #0033FF;
}

.login input[type="button"]{

    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login input[type="button"]:hover{

    background-color: #404040;
    color: white;
}
.button {

    width: 270px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button a{

    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button:hover{

    background-color: #404040;
}
.button:hover a{

    color: white;
}

.login select{

    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login select:hover{

    background-color: #404040;
    color: white;
}
::-webkit-input-placeholder {
   color: red;
}
:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Upvotes: 2

Views: 1027

Answers (2)

coderrick
coderrick

Reputation: 1011

I believe that FireFox's 3Ddomviewer could help illustrate whats going on here. Moreover, what everyone is trying to say is that the blur is being applied to the main-form id as well b/c its a child of the body div that you are applying it to. Now, as for why z-index is not working (****Crackes knuckles****). Okay, so z-index ONLY WORKS ON ELEMENTS THAT HAVE A POSITION! in your main-form div the position isn't set to anything once you give it a position and set z-index to some large negative number it will disappear as it is being hidden by all of the other elements stacked on top of it. See this article for more info. I hope that helps.

Upvotes: 2

Viraj Shah
Viraj Shah

Reputation: 982

That is because you said: -webkit-filter: blur(5px) and filter: blur(5px) in the body selector, that will blur the entire page... you only want to blur an image, so do this:

#imageSelector {
    -webkit-transform: blur(5px);
    transform: blur(5px);
}

Upvotes: 0

Related Questions