Develop Reference

Blur Background Img, Overflow Hidden, Align with parent div

I have done some research on this, but none of the answers are helping me with my issue. Here is a JSFiddle to show what I have so far.
Problem:
I am having an issue when it comes to over flow, as you can see the
background image is overflowing the wrapper.
Next issue, The background image doesn't look to be auto filling to
the wrappers width. I'm assuming that when the overflow issue is
fixed that this might not be a problem anymore.
Lastly, when we can fix everything, is there a way to make the
wrapper extend to the height of the background image without
specifically setting the height myself.
Here is my code:
#wrapper {
margin: 0 auto;
width: 70%;
border: #000000 solid 1px;
overflow: hidden !important;
}
.content:before {
content: "";
position: fixed;
z-index: -1;
background-image: url(../images/10034277536_1454f4e382_background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
}
.content {
z-index: 0;
}
<div id="wrapper">
<div class="content">
Hello world
</div>
</div>
Thanks for any help.

Have a look at: https://jsfiddle.net/5mahg3fp/
.content {
position: relative;
background-size: cover;
}
.content:before {
position: absolute;
}
Positioning the element absolutey instead of fixed and relatively to #content will fix your first problem.
Setting the backgrund-size to cover makes the background grow to the size of the element.
To have an element automatically growing to the size of the background assigned you would have to insert the background as an actual image, positioned statically. The you could add your content to a absolutely positioned child that covers the whole area.

You can make it appear that your image is overflowing across the entire page, add gradient to the bottom of the image (for e.g. #029d7e), then set the background color as the gradient.
background: #029d7e url("http://iforce.co.nz/i/gvudoqvz.ago.png") repeat-x;
https://jsfiddle.net/24wkdof5/
If you want your child element to grow with your parent element, you need to mark both elements with height attribute (either 100% or fixed height).

how do i recreate this google plus effect on a place image

I was just looking at a google plus place and i saw this cool blur effect on an image - the left side of the cover photo, is there anyway to recreate this, i have tried some css blur stuff and a couple plugins although they did not seem to come close to recreating this.
how do you think this is done?
https://plus.google.com/u/0/100447465665053723801/posts
used:
blur.js
foggy.js
.blur {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

Google use two copies of the image. One regular and one blurred. They then overlay and clip them.

They've generated a blurred image version of the header image. Looking at the HTML/CSS you can find the image here:
https://lh5.googleusercontent.com/-nvDu86PoiAc/Uzylet0y0CI/AAAAAAAAABE/3mMd0DUauUY/s630-fcrop64=1,00411693ffffee64:Soften=1,60,0/Resort%2BPool%2B-%2Bdusk%2B2.jpg
You can do what you're trying to accomplish using CSS blur however.
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(50px);">
<!-- your image here -->
</div>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<!-- your content here -->
</div>
</div>
Obviously, you would not put your CSS inline like that. The image div must be separate otherwise your content will become blurred as well. Also, I should note that there is most likely no way to blur part of an image if that's what you're attempting. You'll need to use the same image twice.

Can someone tell me why my links aren't clickable when I have a div under it?

I am making a widget for my site that displays the author and their social links. It worked fine until I added the blurry background div in the mix. Something about it is not letting me click the links any more. I've tried adding z-index values, but that doesn't seem to help. Check out my fiddle to see my problem. Below is the class in question...
.social_artist_image_wrapper {
position:absolute;
height:126px;
width:580px;
background-size:cover;
opacity:0.3;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}

Because element with position:absolute (or anything other than static are placed on top of position:static elements, unless they have a negative z-index.
Try putting position:relative on your inner area, plus a semi-transparent background colour: demo

Change your CSS to have this:
.social_artist_text_wrapper a {
color:#bbb;
text-shadow:0px 0px 5px #000;
position: relative;
z-index: 2;
}
As others have said, it is because you absolutely positioned the background image. So in order to get the other elements to render in front of it you need to set the z-index property, which only works if the position property is something other than static.
Updated fiddle.

I think it is because your div is not under it, it is on TOP of it. This is because you are using position: absolute. You probably can achieve what you are looking for with position:relative.

Add this style to the ".social_artist_image_wrapper" class
pointer-events:none;
Lacks IE support so the positioning answers above may be better suited to your needs (unless you don't need to support IE8 or IE9)

Set opacity on background-image with media query

I have a couple of divs, each with a background image. I'm using responsive and adaptive CSS, and when my divs' widths gets less than a certain size(760px btw), the text and some tables with styling becomes hard to read/see with the background image moving in behind them(the background image is on the far right of the text/tables and unobtrusive if the width is above 760px...). So when the width of the viewport gets to 760px and less, I only want the background image to have an opacity...
How do I do that?
So my CSS starts like this:
#media screen and (max-width: 760px){
background: #cdcdcd url("/images/back.jpg") no-repeat top right;
/*How do I set the opacity of only the background?*/
}

You can not change the opacity of a background image, unless you move it to a separate container.
All you can change is the opacity of BG color using rgba():
background: rgba(0, 0, 0, .5);

You can't set opacity just for a background, but the whole element. You can set opacity of background color (see Zoltan's answer for the example).
You can set white <div> over the image and change it's opacity.
<div class="yourImage">
<div class="imageCover"></div>
</div>
.yourImage {
background: url(http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png);
width: 300px;
height: 83px;
}
.imageCover {
background: #fff;
width: 300px;
height: 83px;
opacity: .5;
}
Live demo: Tinkerbin
However, this won't work if you don't have a clean background BEHIND your image.

Blur Img's & Div's in HTML using CSS

Is it possible to apply a blur to an HTML element(div & img)?
I am developing solely for the iPad so cross-browser compatibility is not an issue & I can use HTML5 CSS3 techniques.
I know how to blur text but this CSS doesn't blur the actual HTML element or its border:
text-shadow: 0 0 8px #000;
color: transparent;
I googled this but it doesn't blur the image in my browsers:
filter: blur(strength=50);

Webkit has a property called -webkit-filter that allows for the techniques of blurring: -webkit-filter: blur(15px);
http://jsfiddle.net/danielfilho/KxWRA/

You can simply add this to your css, for an image:
In the following example, you'll be using a blur with 5 pixels of radius. And it is extremely important to use all vendor prefixes available, so it works on all browsers with this feature implemented, untile it comes to a "stable" version.
img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}

I think the best way is to layer the same image over itself a few times and test different positioning and opacities on the overlayed ones.
Here's the CSS that I came up with. Keep in mind I'm using the nth-child CSS3 selector (but you don't seem to have an issue with that):
img {
width:300px;
height:300px;
position:absolute;
opacity:0.2;
}
.container {
position:relative;
overflow:hidden;
width:300px;
height:300px;
}
img:nth-child(1) {
opacity:1;
}
img:nth-child(2) {
left:2px;
top:2px;
}
img:nth-child(3) {
left:-2px;
top:-2px;
}
img:nth-child(4) {
left:-1px;
top:-1px;
}
img:nth-child(5) {
left:1px;
top:1px;
}
HTML:
<div class="container">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
</div>
The result is pretty promising.

CSS does not have the ability to blur, besides techniques with text-shadow and box-shadow. But even with these, borders and images aren't able to be blurred.
This JavaScript library, however, can handle images.
Also, you may find this technique interesting. It's a neat illusion using pre-fabricated blurry images.

I had to pretty thoroughly research this problem not too long ago and came up with an extremely flexible solution, though it may be overkill for some people's needs. I needed not only blurred images, but also a dynamic blur radius, overlay color, and overlay opacity for various kinds of images. I also needed to have the option of just blurring an image in a background with other elements overlayed on top of it. Here's the best cross-browser (and performant) solution I was able to create.
First, I'd have an SVG on hand, uninspiringly called blur.svg. It applies a blur filter and if you look closely, the stdDeviation (which sets the blur radius) is actually set programmatically from a passed in parameter to the URL requesting the asset.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="#{params[:blur]}" />
</filter>
</svg>
Then I had an SCSS mixin that would allow one to add a blur overlay to any wrapper, with a customizable blur radius, overlay color, and overlay opacity.
#mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) {
position: relative;
.background_blurred {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter: url('blur.svg#blur?blur=#{$blur_radius}');
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}');
transform: translateZ(0);
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: $overlay_color;
opacity: $overlay_opacity;
}
}
.foreground {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
}
You may be wondering why I included a transform: translateZ(0);. The only effect that has is to force hardware acceleration on the render to keep things performant. You may also be wondering why there are no vendor prefixes. You can look up things like filter on CanIUse if you want, but I used autoprefixer on this project to worry about that stuff for me. And of course, why filter using this SVG, rather than with something like blur(4px)? Wouldn't that be easier? It would, but Firefox (as of writing) only supports the filter property with a URL.
Then you can apply the blur mixin to a wrapper class:
.my_wrapper_class {
#include background_blurred(3, #f9f7f5, 0.7);
}
Notice that for this method, we have to use a class with a custom background set in a style attribute instead of an image tag with a src. You can tweak the background position and override the background size to your liking.
<div class="my_wrapper_class">
<div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div>
<div class="foreground">
<p>Stuff that should appear above the blurred background and not be blurred.</p>
</div>
</div>

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See live demo and complete source code here
http://purpledesign.in/blog/adjust-an-image-using-css3-html5/
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}