Autor Zpráva
michal454454
Profil
Zdravím zajímalo by mě jak nastavit rozmazani -webkit-filter:blur... u background: url("obrazek.jpg"); v body aby se nerozmazala cela stranka diky... ;)
Tomáš123
Profil
michal454454:
zajímalo by mě jak nastavit rozmazani v body aby se nerozmazala cela stranka diky... ;)
Použiť rozmazaný obrázok.
simvilk
Profil
michal454454:
<html>

    <head>
        <title>Blur</title>
        <style type="text/css">

            body{margin:0;}

            .background-image {

              background-image: url('stockvault-flowers125691.jpg');
              width: 100%;
              height: 100%;

              -webkit-filter: blur(5px);
              -moz-filter: blur(5px);
              -o-filter: blur(5px);
              -ms-filter: blur(5px);
              filter: blur(5px);
            }

        </style>
    </head>
    <body>

        <div class="background-image"></div>

    </body>

</html>
Keeehi
Profil
simvilk:
Ještě by se tam hodilo position: absolute; z-index: -1; ať přes to může proudit obsah.

michal454454:
Řešení od Tomáš123 je však hezčí, lepší, bezpečnější.
Bubák
Profil
Ještě by se tam hodilo natáhnout div s pozadím, abyl nebyl krátký, pokud stránka bude dlouhá, 100% je totiž výška viewportu.
.background {
    background: #ff9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
Pro pozovnání:
http://kod.djpw.cz/dcmb div pozadí 100%
http://kod.djpw.cz/ecmb roztažení divu s pozadím navrženou úpravou.

CSS filter má malou podporu, nevidím důvod, proč nepoužít rozmazaný obrázek. Také dojde k úspoře dat, u rozmazaných obrázků jsou kompresní algoritmy úspěšnější, než u těch, kde jsou ostré hrany a spousta detailů.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: