How Background Image Position Animation Using CSS

One of most important parts of designing your webapges are backgrounds. All background can be designed and managed with simple CSS code.

If you want to use one, solid color as your background just use background-color CSS element:

background-color: #ff0000;

This one line of CSS code will create background with #ff0000 color.

The other thing you might do with your web page is to create background with image. If you use this code line in your layout CSS file:

background-image:url('background.jpg');

the browser will use background.jpg image for background of that page.

Now, you can play with aligning and positioning the background images.
Cascade style sheet uses following elements for background styling:

background-repeat: repeat;

this value will repeat image both horizontally and vertically,

background-repeat: repeat-y;

the image will only be tiled vertically,

background-repeat: repeat-x;

the image will only be tiled horizontally,

background-repeat: no-repeat;

and obviously with no-repeat; value image won't be repeated.

background-attachment:fixed;

fixed value will glue the background image on current position and that can be interpreted as 'scroll' by some browsers. It is recommended that browsers interpret 'fixed' correctly, at least for the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'.

background-position:center;

the background image will be centered,

background-position: 14% 84%;

With using percentage you can specify where the background image will be. With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

background-position: 50px 100px;

And lastly with specific positioning in pixels, you can place your background image on exact part of web page design.

Also, CSS allow that all background styling can be written in one code line, so combining examples mentioned above can be:

background: #ff0000 url('background.jpg') no-repeat top left;
background: #ff0000 url('background.jpg') no-repeat bottom right;
background: #ff0000 url('background.jpg') no-repeat fixed center;