well, searched lot , find didn't work me, curse, i'm tryng blur background image when person viewing web page see div, started make page short time ago, started try learn css , javascript, so, i've done 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 satisfação de nossa clientela nossos produtos sempre foram, são, e sempre serão destinados nossos clientes, (salve ronildo)</a> <h1 class="titles">qual é nossa missão na terra?</h1> <a class="macaco">nossa missão é proporcionar melhor qualidade de entreterimento sadio para 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 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 make this: http://jordanhollinger.com/media/bmu-landing.png
here go: how apply css 3 blur filter background image
now, there typo float: rigth. also, there lot of unnecessary things in code, beginner. keep practicing , fall in place eventually!
and, hard decipher want exactly. " i'm tryng blur background image when person viewing web page see div,"
do mean, when div picture visible?
Comments
Post a Comment