CSS Background becoming blurred besides a div

Question

Well, I searched a lot and everything that I find didn't work for me, like a curse, what I'm tryng to do is blur a background image when the person that is viewing the web page see the div, I started to make this page a short time ago, as soon as I started to try to learn CSS and JavaScript, so, what I've done is this:

html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> BIRL </title>
</head>
<body>



<div class="bg-img">

<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><div class="botao"><a href="game.html"><img src="play.png" class="playButton"></a></div></center>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>

<div class="info">
<h1 class="titles">Quem nós Somos?</h1>
<a class="macaco">Nós somos uma empresa totalmente responsável e profisisonal inclinada a satisfação de nossa clientela
Nossos produtos sempre foram, são, e sempre serão destinados a nossos clientes, (salve ronildo)</a>

<h1 class="titles">Qual é a nossa missão na terra?</h1>
<a class="macaco">Nossa missão é proporcionar a melhor qualidade de entreterimento sadio para a sua família e amigos afins,
todos os nossos jogos possuem uma qualidade exemplar e classificação livre, ou seje, eles podem ser jogados por qualquer pessoa
em qualquer idade e qualquer lugar do mundo, nós nunca utilizaremos palavras de baixo calão em nossas obras eletrônicas, isto
é um exemplo para os seus filhos.</a>

</div>

</div>

</body>
</html>

css:

    @font-face {
    font-family: LemonMilk;
    src: url(LemonMilk.otf);
}
.playButton {
    width: 55%;
    height: 40%;
    z-index:2;
}
.game {
    width: 100%;
    height: 100%;
}
body {
    background:url('background.jpg') no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}
.botao {
    float: rigth;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    z-index:2;
}
.info::before {
    display: block;
    width: 100%;
    height: 100%;
    background: url('background-blurred.jpg');
    background-size: cover;
    content: '';
    opacity: 1;
}
.info {
    background-color: #FFFFFF;
    font-family: LemonMilk, Verdana, Tahoma;
    padding: 70px;
    text-align: justify;

}
.titles {
    color: #000000;
    text-align: center;
    z-index: 1;
}
.macaco {
    color: #000000;
}

I want to make something like this: http://jordanhollinger.com/media/bmu-landing.png

You'll need to be more specific what you want to have happen, it's hard to understand based on your question so far. — Caleb Anthony, Sep 01 '16 at 21:04

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

Here you go: How to apply a CSS 3 blur filter to a background image

Now, there is typo float: rigth. Also, there are a lot of unnecessary things in your code, but you are beginner. Keep practicing and everything will fall in its place eventually!

And, it is hard to decipher what you want exactly. " what I'm tryng to do is blur a background image when the person that is viewing the web page see the div,"

Do you mean, when DIV with the picture is visible?

edited May 23 '17 at 12:00

Community

1
1

answered Sep 01 '16 at 21:05

Vcasso

1,328
1
8
14

I'll search for an example – tlckpl Sep 01 '16 at 21:26
I don't know if you'll have the patience to help me, but, I tryed and got this: print1: http://prntscr.com/cd39ae print2: http://prntscr.com/cd39ra print3: http://prntscr.com/cd39x5 – tlckpl Sep 01 '16 at 22:00

CSS Background becoming blurred besides a div

1 Answers1