Cool Fixed Body Background HTML Codes

HTML Background Codes

To make your website look cool, fixed body background HTML codes may enable you to put the final polish behind your content. Using these CSS tags give you ultimate control over your background images.

CSS and Cool Fixed-Background HTML Codes

The creation of Cascading Style Sheets was as wonderful for web designers as the knife was to for bread slicers. Suddenly all aspects of a web page could be controlled with pixel-precision, and even better, how the background images were presented could be controlled as well. By defining the "background" property in the "body" element of the style sheet, suddenly the aggravation of the tiling image was solved:

body { background-image: url(YourBackGround.jpg);

color: #EEEEEE; background-color: #FFFFFF; }

More Than Just Images

Obviously there are more parts to this than simply the image title. In fact, there are several different parts to the BACKGROUND definition:

  • Background - This is the shorthand for all background properties, if you don't want to define them all.
  • Background-attachment - This is either fixed or scrolling, which determines whether the background image on the page (or the table cell or text block) will move with the block or not as the page is scrolled up or down.
  • Background-color - This is self-explanatory, though CSS improves HTML by allowing hexadecimal, RGB, or even just syntax ("red") to define the color.
  • Background-image - This is a relative link to the image that will be placed by the CSS code.
  • Background-position - This quality allows the image to be placed anywhere on the page - no longer are you limited to starting in the upper right hand corner! Using percentages the image can be put exactly where the layout demands it.
  • Background-repeat - Once the image is placed, you can determine if it will repeat at all, and if so, if it will repeat horizontally, vertically, or both (going for an old-school "tiled" effect).

True Ninja Background Coding

There are a couple of ways to set all of these properties within CSS. One way would be to define every quality individually:

 <divstyle="background-image:url(/harddrive/YourGraphic.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:45%70%;>
</div> 

However, the "shorthand" mentioned above makes it even easier, as each quality can be defined one after another just by invoking the "BACKGROUND" tag. For example, the above code could be written all on one line:

 <divstyle="background:url(harddrive/YourGraphic.jpg)no-repeatscroll45%70%;> 

That is what is known as "well-formed" code, and if it is defined in your stylesheet, you can get even more control over your entire site.

Learn More

For more information, look at the other CSS and HTML articles on LoveToKnow, and soon your website will look exactly the way you want it, front and background.

Cool Fixed Body Background HTML Codes