CODEWITHSUNDEEP
htmlcss
studentAir01
studentAir01

Reputation: 23

How can I blur my background image in css?

I blur my background image in body element using filter: blur(5px); The problem is instead of the background image, my content inside the div is the one that is affected.

enter image description here enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    body {
        width: auto;
        margin:0;
        padding:0;
        /*background-color: #2E3137; */
        background-image: url("images/StockSnap_Q6PIRY9O7M.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
          -webkit-filter: blur(5px);
         -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
         filter: blur(5px);

    }

    @font-face {
        font-family: 'Roboto', sans-serif; /*a name to be used later*/
        src: url('https://fonts.googleapis.com/css?family=Roboto'); /*URL to font*/
    }

    * {
        border-collapse: collapse;
    }

    h2 {
        text-align: center;
    }

    .container {
        width: 960px;
        height: 500px;
        margin: 50px auto;
        position: relative;


    }

    .row {
        width: 320px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        font-family: arial;
        /*font-size: 13px;*/
        /*color: #e4e4e4; */
        color: white; 
        padding: 10px 55px 40px;        
        /*background: rgba(105,97,82,0.5);*/
        /*background: rgba(20,21,23,0.6); */
        background: rgb(102, 105, 110);
        border: 1px solid white;
        box-shadow: 0 4px 8px #000000;
        border-radius: 5px;
        font-family: 'Roboto';

    }

    input[type=text],[type=password] {
        width: 97%;
        height: 30px;
        padding-left: 5px;
        margin-bottom: 20px;
        margin-top: 8px;
        color: #4f4f4f; 
        font-size: 16px;


    }

    #login {
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        font-weight: bold;
        cursor: pointer;
        /* display: block; use for centering  */
        display: block;
        /*background-color: #DEE9FF;*/
    }

    #signup {
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        font-weight: bold;
        cursor: pointer;
    }

    </style>
</head>
<body>

<?php
include_once("code1.php");
?>

<div class="container">
    <div class="row">
        <h2> Sign In </h1>
        <form action="p1.php" method="POST">
            <?php echo form_errors($errors); ?>
            Username: <br/>
            <input type="text" name="username" /> <br/> 
            Password:  
            <input type="password" name="password" /> <br/>
            <input type="submit" name="submit" id="login"/>
        </form>

        <form action="register.php" method="POST">
            <input type="submit" name="register" value="Create New Account" id="signup"/>
        </form>
    </div>
</div>

</body>
</html>

Upvotes: 0

Views: 11508

Answers (4)

minimos11
minimos11

Reputation: 3

If you want to have the backdrop have a blur effect relplace filter: blur(5px); width backdrop-filter: blur(5px); and -webkit-backdrop-filter: blur( 5px);. This should be what you are looking for.

Upvotes: 0

Fel
Fel

Reputation: 362

Try this one

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */
    filter: blur(2px);
}
</style>
</head>
<body>
<h1>The filter Property</h1>

<p>Apply a blur effect to the image:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">



</body>
</html>

Upvotes: -1

user7601056
user7601056

Reputation: 

body:before {
	content: '';
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-image: url("http://www.planwallpaper.com/static/images/hexagons-3d-desktop-wallpaper-hd_VUiBHpV.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
      -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
     filter: blur(5px);
     z-index: -9;
}
<body>
<h1 style="margin: 20px auto; width: 80%; color: #393; background: rgba(0,0,0,0.7); text-align: center">Hello from Breakermind</h1>
</body>

Upvotes: 3

grinmax
grinmax

Reputation: 1855

try this 

<div class="container">
    <div class="row">
        <h2> Sign In </h1>
        <form action="p1.php" method="POST">
            <?php echo form_errors($errors); ?>
            Username: <br/>
            <input type="text" name="username" /> <br/> 
            Password:  
            <input type="password" name="password" /> <br/>
            <input type="submit" name="submit" id="login"/>
        </form>

        <form action="register.php" method="POST">
            <input type="submit" name="register" value="Create New Account" id="signup"/>
        </form>
    </div>
</div>

body {
        width: auto;
        margin:0;
        padding:0;
        /*background-color: #2E3137; */


    }

    body:before {
        content: '';
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-image: url("https://wallpaperbrowse.com/media/images/background-pictures-2.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
          -webkit-filter: blur(5px);
         -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
         filter: blur(5px);
    }

    @font-face {
        font-family: 'Roboto', sans-serif; /*a name to be used later*/
        src: url('https://fonts.googleapis.com/css?family=Roboto'); /*URL to font*/
    }

    * {
        border-collapse: collapse;
    }

    h2 {
        text-align: center;
    }

    .container {
        width: 960px;
        height: 500px;
        margin: 50px auto;
        position: relative;


    }

    .row {
        width: 320px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        font-family: arial;
        /*font-size: 13px;*/
        /*color: #e4e4e4; */
        color: white; 
        padding: 10px 55px 40px;        
        /*background: rgba(105,97,82,0.5);*/
        /*background: rgba(20,21,23,0.6); */
        background: rgb(102, 105, 110);
        border: 1px solid white;
        box-shadow: 0 4px 8px #000000;
        border-radius: 5px;
        font-family: 'Roboto';

    }

    input[type=text],[type=password] {
        width: 97%;
        height: 30px;
        padding-left: 5px;
        margin-bottom: 20px;
        margin-top: 8px;
        color: #4f4f4f; 
        font-size: 16px;


    }

    #login {
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        font-weight: bold;
        cursor: pointer;
        /* display: block; use for centering  */
        display: block;
        /*background-color: #DEE9FF;*/
    }

    #signup {
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        font-weight: bold;
        cursor: pointer;
    }

live demo - https://jsfiddle.net/grinmax_/fmus0fe0/

Upvotes: 1

Related Questions