Drifting Designs


Drifting Designs Tutorials > > Coding > > HTML > > Background






Background Color
Background Images
Fixed Image




Background Color


Background color is the color of, well, your background, obviously. For example, this webpage has a background of light blue (although this div layer has a background of light gray). The default background is white, but to customize it, paste the following code into your Body part of your webpage after the <body> tag -

<body bgcolor="addcolorhere">


Where it says "addcolorhere", put the hexadecimal of the color you want to be the background of your webpage.



Background Image


Instead of being a plain color, want your background to be of an image? Use the following code -

<body background="http://urlofyourimage.gif">


Replace "http://urlofyourimage.gif" with the url of your image.

Note: When using the above code, keep in mind that the image will "tile" across the screen if the image is too small to cover the whole page as a background by itself. To see what I'm talking about, click here.

This "tiling" attribute is sometimes liked because it results in interesting textures and designs. However, if you're not trying to get that effect, and instead want the image to not repeat, use the "Fixed" code (see below).



Background Fixed Image


Most of the time, I don't want the picture to tile, so I use a CSS code to keep the background in place and to not repeat, such as in this page. Use the below code if you do not want your image to tile. Enter this into the Head part of the page, or just add it to your existing CSS style sheet. If you do add it to your existing CSS style sheet, make sure that it is one of the first attributes listed on the sheet.

<style type="text/css"> BODY, {background: url(http://urlofyourimage.gif); background-repeat: no-repeat } </style>


Replace "http://urlofyourimage.gif" with the URL of the image you want to use as your background.




Back to Top




© Drifting Designs