Self-destructive Layouts
@vampirefreaks.com
Background Image

Content:
  1. Inserting a background image
  2. Background-color
  3. Background-image
  4. Background-position
  5. Background-repeat
  6. Background-attachment
  7. Other elements

Inserting a background image:

<style>
 html, body{
  background-color: COLOR HERE;
  background-image: url(http://IMAGE_URL_HERE.jpg);
  background-position: top left / center center / bottom right / ....;
  background-repeat: repeat / no-repeat;
  background-attachment: fixed / scroll;
 }
</style>

Background-color:

The background-color property sets the background color of your profile. When using a background-image that doesn't repeat, it might be a good idea to choose a color that blends in with the image. You can either use a hex code or a valid color name.

Background-image:

The background-image property sets the background image of your profile. Here you need the URL of the image you want to use as a background. If you have the image on your computer, you have to upload it at an image hosting site, such as Tinypic or Photobucket before it can be used as a background.

Background-position:

The background-position property sets the position of your background-image. Possible positions are: left, right, top, bottom, center, in any sensible combination.

Example:
To get the background-image to position itself in the bottom left corner of the screen, you would insert this value:

background-position: bottom left;

Background-repeat:

The background-repeat property sets whether the background should repeat or not. Possible values are: no-repeat, repeat, repeat-x, repeat-y. If you choose the value "no-repeat", the background-image will only be displayed once. "Repeat" will make the background repeat itself both horizontally and vertically. "Repeat-x" will make the background repeat only horizontally, while "repeat-y" will make it repeat only vertically.

Example:
To get a background image that does not repeat itself, insert this value:

background-repeat: no-repeat;
To get a background image that only repeats itself vertically, insert this value:

background-repeat: repeat-x;
To get a background image that only repeats itself horizontally, insert this value:

background-repeat: repeat-y;
To get a background image that repeats itself both horizontally and vertically, insert this value:

background-repeat: repeat;

Background-attachment:

The background-attachment property sets whether the background-image should be fixed or scroll along with the rest of the page. Possible values are: fixed, scroll.

Example:
To get a background image that is fixed (does not scroll with the page), insert this value:

background-attachment: fixed;
To get a background image that scrolls along with the rest of the page, insert this value:

background-attachment: scroll;

Other elements:

You can insert a background-image in most HTML elements, such as div's (scrollboxes), tables and paragraphs - even links.

The code to insert a background-image in a scrollbox:
    <div style="width: 300px; height: 200px; overflow: auto; background-color: COLOR HERE; background-image: url(http://IMAGE_URL_HERE.jpg); background-position: top left / center center / bottom right / ....; background-repeat: repeat / no-repeat; background-attachment: fixed / scroll;"> Text here. </div>
Or you can give your scrollbox a class, like this:
    <style>
    .myscrollbox{
      height: 200px;
      width: 300px;
      overflow: auto;
      background-color: COLOR HERE;
      background-image: url(http://IMAGE_URL_HERE.jpg);
      background-position: top left / center center / bottom right / ....;
      background-repeat: repeat / no-repeat;
      background-attachment: fixed / scroll;
     }
    </style>

    <div class="myscrollbox">Text here.</div>
Both methods will give the same result, but if you give your div a class, you can have many of the same div's without having to type the whole code over and over again.