Hi i am trying to blur the background image but i think its lacking in doing so. Any help over it will boost my energy for it. Thanks
This my CSS
html {
position: relative;
min-height: 100%;
max-width: 100%;
background: url(img/rsz_1spring.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width: 100%;
overflow-x: hidden;
}
I am trying to apply this but it blur all my webpage instaed of background image only.
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
Thank you.
If you are applying blur to <html> then it will blur your webpage.
Instead of adding background to <html> You need to create another <div> with in <body> with size to that of webpage and add blur to it.
Example
body {
font-family: "Arial";
color: #fff;
}
.page-bg {
background: url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg');
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}<h1>
This is a title
</h1>
<div class="page-bg">
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments