HTML and CSS : Blur background for div tags

This effect began being popular amongst blogger. In order to apply it, you don't need any kind of advanced photoshop knowledge or CSS, instead, all you need is patience

We will require a background image and another one with blur applied to it. You will need a picture editing program ( i personally prefer Gimp - its freewere and you find it right away after googlin it ). aside gimp, all we require is pure HTML and some css settings :=)

We will apply the CSS style so that the background will overlap perfectly with the blur even when the page gets bigger or it requires scroll. The purpose of this tutorial is to obtain an effect as following :

In order to keep the image in its place and avoid it overlapping over the blur when you scroll down the page, you have to apply "background-attachment:fixed". This feature enables the whold blur effect.

We will also apply "float:left" in order to avoid the divs flying out the frame if the resolution is smaller then expected.

The following code will be applied :

* { margin: 0; padding: 0; }
body { font: 15px "Times New Roman", Times, serif ;
background: url(images/background.jpg) no-repeat fixed; }

.blur-class {

width: 450px;
margin:15px 15px 15px 15px;
background: url(images/background-blur.jpg) no-repeat fixed;
border: 2px #ffffff solid;
padding: 25px 0 0 0;
min-height: 159px;
float:left;

}

What are PHP and MySQL?

PHP was at first created as a simple scripting platform called "Personal Home Page". Nowadays PHP (the short for Hypertext Preprocessor) is an alternative of Microsoft's Active Server Pages (ASP) technology.

PHP is an open source server-side language which is used for creating dynamic web pages. It can be embedded into HTML. PHP is usually used in conjunction with a MySQL database on Linux/UNIX web servers. It is probably the most popular scripting language.

PHP is a widely-used general-purpose scripting language and interpreter that is freely available. A full explanation of all the PHP tags, complete user manual and lots of tutorials can be found on the PHP's official page.



MySQL is a freely available open source Relational Database Management System (RDBMS) that uses Structured Query Language (SQL).

SQL is the most popular language for adding, accessing and managing content in a database. It is most noted for its quick processing, proven reliability, ease and flexibility of use. MySQL is an essential part of almost every open source PHP application. Good examples for PHP/MySQL-based scripts are phpBB, osCommerce, and Joomla.