applications-internet

Posted by & filed under Themes, Website.

There is a background image, it is not one that is set in the config but done by pure css:

/* provide a background image */
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Then I added padding and a transparant background:

#content{
padding:10px;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(255,255,255) transparent;
/* RGBa with 0.3 opacity */
background: rgba(255,255,255, 0.3);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}

In order for padding not to influence/break the basic css I used:

/* apply a natural box layout model to all elements http://paulirish.com/2012/box-sizing-border-box-ftw/
small enhancement, apply only where needed, side effects
*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

p5rn7vb