Website Design

Animated background

Works with:
FF3
Chrome
IE6
IE7
Opera
Safari

Description

Liven up boring solid colour backgrounds by using a small gif image with rotating colours.

Demo

Animated background

This is a container with some content

CSS

  1. #demo_background {
  2.     background-image: url('bg.gif');
  3.     border: 1px solid black;
  4.     background-color: #0C2C0E;
  5. }
  6.  
  7. #demo_background h5 {
  8.     color: white;
  9.     padding: 10px;
  10.     background-color: black;
  11. }
  12.  
  13. #demo_background p {
  14.     margin-left: auto;
  15.     margin-right: auto;
  16.     margin-top: 20px;
  17.     width: 700px;
  18.     height: 600px;
  19.     background-color: #000;
  20.     color: #fff;
  21.     padding: 5px;
  22.     text-align: left;
  23.     font-family: Tahoma, Arial;
  24.     font-size: 100%;
  25.     position: relative;
  26. }

XHTML

  1. <div id="demo_background">
  2.     <h5>Animated background</h5>
  3.     <p>
  4.         This is a container with some content
  5.     </p>
  6. </div>