How to blur background image

You can set the opacity between 0 and 1, with 0 being completely blurred (white) and 1 being no blur at all (regular pic). You do this by writing it like this after the background image in CSS: opacity: 0.5; or whatever number you want between 0 and 1.

when i am trying opacity: 0.5; it is blurring my content which is above the image but image is not getting blur

If you have the background of an element set with a certain opacity, then all of the nested items will have the same opacity. I'm not sure your code, but you might need to set the background in a different area (such as a separate div) than the content that you aren't wanting to have blurred.

I am sorry i forget to provide my code. This is my code body { background: url("../Img/Background.jpg") no-repeat center center fixed; background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; opacity: 0.5; } i am trying to provide body a image as background and over it i am trying to draw header. now after applying opacity to body all the header is getting blur but the body background image is not changing

I have never tried to do this before, but when I try to do this now, I get the same results that you are getting. Actually, my background gets kinda skewed and blurring, as if the main background is regular and a copy of the background is overlaid and something like 10px shifted to the side, so it looks just odd. While at the same time, all of the other elements on the page, which would be children of the body element, are receiving the same opacity that I set for the body element. However, when I have wanted an opaque background in the past, I don't add an image to the body, I add a container div that spans the whole of the area and set a background image to that container div with a certain opacity, and it works great with setting an opacity (assuming none of my other elements are children of the background div).

I want my image to be semi-transparent but my image is background for body element so if i am applying opacity to it all the elements above my body are getting that opacity but my body background image is not getting that effect.

I would suggest using a div that extends the whole body (height: 100%, width: 100%), placing your image inside of it, setting its position: absolute, and then the opacity: 0.5 or whatever opacity, and the z-index: -1. This will have it span the whole background, set an opacity, and make it behind all of the other elements on the page. I think this might help with the issue.