Blurry background for a login modal box

Question

I'm making an application in which I need to have a login box whose background is transparent, so that the background image of the <body> is displayed as well. Like in LinkedIn:

enter image description here

LinkedIn has a blurry background for this login box. How in CSS can I achieve this?

Here's what I've tried, but it doesn't work.

background-color:ffffff;
opacity:0.4
margin-left:200px;

Can anyone send me in a good direction?

What is the page link? I tried logging out of Linkedin but I cannot see this page. I would just inspect element in Chrome, but I suspect @Benjamin s answer will be close — lharby, Aug 28 '14 at 16:12
possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — Paulie_D, Aug 28 '14 at 16:19
They use the [filter](https://developer.mozilla.org/de/docs/Web/CSS/filter) property with a svg resource. which is not [well supported](http://caniuse.com/#search=filter) — Nico O, Aug 28 '14 at 16:26
possible duplicate of [How to use CSS (and JavaScript?) to create a blurred, "frosted" background?](http://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background) — ctwheels, Aug 28 '14 at 17:42

Omar Enrico Polo · Accepted Answer · 2014-09-04T10:28:59.813

Have you tried to use the filter (for now working only in webkit) ?

Check this: http://davidwalsh.name/css-filters

(I don't have the time to try, but you might have to put two div, one with the image and the filter and another with the form)

Sorry for my english :)

EDIT:

I've made this pen: http://codepen.io/anon/pen/gEmrD

HTML:

<div class="container">
  <div class="content">
  </div>
  <div class="form">
    <p>This is you form (with a bit of immagination :P )</p>
  </div>
</div>

CSS:

.container {
  width: 1000px;
  height: 100%;
  min-height: 500px;
  background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
  background-size: 1000px;
  background-position: 50% 50%;
  display: block;
}

.content {
  width: 100%;
  height: 300px;
  margin: 0;
  background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
  background-size: 1000px;
  background-position: 50% 0;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  display: block;
}

.form {
  position: absolute;
  top: 200px;
  left: 250px;
  width: 500px;
  height: auto;
  background-color: rgba(255,255,255,0.5);
  color: #222;
  display: block;
}

Including a summary of linked content would be helpful in case the website is unavailable or changes. I notice that the linked blog has a lot of code examples. Can you add the most relevant ones to your answer? — skrrgwasme, Aug 28 '14 at 16:15
@OmarEnricoPolo Looks great, btw there's an extra `;` in the first section — ctwheels, Aug 28 '14 at 17:50

score 0 · Answer 2 · answered Aug 28 '14 at 16:08

0

You should try background-color: rgba(255,255,255,0.5) which makes the background color transparent whereas the opacity: 0.4 makes transparent even the content.

See the DEMO

answered Aug 28 '14 at 16:08

Benjamin

2,612
2
20
32

There is a blur on the background too. I will check it in the console. – lharby Aug 28 '14 at 16:10
@user2619381 this [answer](http://stackoverflow.com/questions/20411257/css-blur-on-background-image-but-not-on-content) will help you how to blur – Benjamin Aug 28 '14 at 16:18

Blurry background for a login modal box

2 Answers2