How to create simple parallax effect.

It is really simple to create parallax effect on your site. Add this script to your html head.

<script>        
    function onLoad() {
        window.onscroll = function() {
            var speed = 4.0;
            document.body.style.backgroundPosition = "center " + Math.round(-window.pageYOffset / speed) + "px";
        }
    }   
</script>

In your body tag add -> onload=”onLoad()”. This will automatically start the script on page load. Here is some css you will need for example to work:

body{background: url("/image/bg-texture-1200.png") repeat-x top center; width: 100%;  background-color: #E9F5FA; background-attachment: fixed;}

Multiple background images in CSS

This example will show how to make multiple backgrounds for one div. It is perfect for headers and menus and it contains 3 parts ( left, middle, right ).

.box-header{background-image: url(images/left-orange.png),url(images/right-orange.png);background-repeat: no-repeat,no-repeat;background-position: 0% 0%, 100% 0%;height: 25px;line-height: 23px; text-align:center; width: 99%;margin-bottom: -14px;    position: relative; font-size: 15px; font-weight:bold; margin-top: 20px;}
.box-header::after{background-image: url(images/orange-mid.png); background-repeat: repeat-x;  display:block; width: 91.5%; content:""; height: 24px; margin-top: -23px; margin-left: 14px;}

Bootstrap startup template

Hello, I will provide you with basic bootstrap template with great reservation popup.
This template contains:

  • navigation bar with dropdown menu and popup box
  • carousel slider
  • several styles for content
  • fixed footer

Bootstrap is a really fast way to build responsive designs. Once you learn to use it, you will be impressed how good framework Bootstrap is.
Here is the link to -> documentation

Responsive design for all browsers and older versions of IE

If your task is to make your CSS media queries to work in most browsers and older versions of IE (7-8), all you need to do is to include Polyfills. Polyfills are js and you can download them from https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills. I can recommend you Respond by Scott Jehl.