how to blur the background image only in css


Tags: html,css

Problem :

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.



Solution :

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>


    CSS Howto..

    How to make the height of the div take all the space?

    How do I get a video to fit in a specified area?

    How do you hide an HTML element based on a series of parent elements

    How to hide one table and show another in nice animated way?

    How to target a group of long similar CSS selectors on one line?

    How to remove CSS attribute such that HTML attribute will take effect again?

    Font-family not showing correctly on my website

    How can I make a sub-menu appear adjacent to main menu and not below it with css?

    How to set a css class of the widget type with Symfony2

    Horizontal navigation menu - how to increase size of
  • on hover
  • How to import a CSS file from an external bundle resource

    how to make my HTML 'font' edge color match with background on css?

    How to Properly Add CSS in a MailMessage

    How to prevent inner text resizing in CSS Animation @keyframes?

    How to make css search form responsive

    How to add vertical gradient using css?

    How to select elements using CSS selector who's attribute can have multiple values

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    CSS: How to center texts with transitioning position?

    Divs are overlapping, how to fix? CSS

    how to move button to left

    how can I use of a php variable into a .css file

    How do you make HTML elements appear on a vertical line using CSS?

    HTML: How to style each table cell in a column via CSS?

    drupal themes: how do I include several css files / js files on my theme's .info file?

    mkd2pdf, wkhtmltopdf, how to make PDF for slide

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?

    How to detect which button is clicked in javascript?

    How to activate a CSS property according to a variation in PHP code or URL direction?

    How to make responsive horizontal grids? [closed]