Here are some examples of how to apply a background image or color to your Web pages. Experiment and have some fun learning this!
You can gain control over your Web page backgrounds with Cascading Style Sheets. Here are a few examples to get your creative juices flowing. NOTE: The scripts on this page are to be Embedded inside the HEAD of your Web page.
Background Color
<html>
<head>
<style type="text/css">
<!--
body {background-color: #66ccff}
h1 {background-color: #ffffcc;
padding:3px;}
h2 {background-image:url(weave.gif);
color:white; padding:3px;}
h3 {background-color: transparent;
padding:3px;}
p {background-color: rgb(255,204,0);
padding:3px;}
-->
</style>
</head>
<body> <h1>Head Style 1</h1> <h2>Head Style 2</h2> <h3>Head Style 3</h3> <p>Paragraph Style</p> </body> </html> |
Here are some simple examples utilizing the background command to a few selectors, such as the H1, H2, H3, and P tags. To aid in the demonstration, I've added padding to these selectors to give the text a little “elbow room”.
Here are the basics on setting a background image with Cascading Style Sheets. Using CSS gives you more “toys” to play with over just using the BODY tag to insert a background image or color on the Web page.
Background Image
<html>
<head>
<style type="text/css">
<!--
body
{
background-image:
url(weave.gif)
}
-->
</style>
</head>
|
This little trick will be worth it’s weight in gold! Now you can create effects only done with an “Art Program” such as Adobe's PhotoShop ® or Jasc's Paint Shop Pro ®. Now you can tile your images horizontally or vertically and include a background color as well!
Background Repeat
<html>
<head>
<style type="text/css">
<!--
body
{
background-color: #ffffcc;
background-image:
url(weave.gif);
background-repeat: repeat-y
}
-->
</style>
</head>
|
|
Replacing the repeat-y with repeat-x allows you to switch from a vertical to horizontal tile of the image.
You can place an image in one of nine positions on the screen without resorting to DHTML's positioning of an image. You can find these positions listed below the demonstration. To “dead-center” the background on the page use the following code.
Background Position
<html>
<head>
<style type="text/css">
<!--
body
{
background-image:
url(blueslats.gif);
background-repeat: no-repeat;
background-position: center center
}
-->
</style>
</head>
|
These are all the positions available:
top left, top center, or top right
center left, center center, center right
bottom left, bottom center, bottom right.
This last demonstation fixes the background to one of nine positions on the page, almost like the example above except that the image is glued to the page and will not scroll with the rest of the page. Nice for a fixed company logo much like network TV uses all the time. This is NOT supported by Netscape 4.n at this time.
Background Fixing
<html>
<head>
<style type="text/css">
<!--
body
{
background-color: #ffffcc;
background-image:
url(blueslats.gif);
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed
}
-->
</style>
</head>
|
These are all the positions available:
top left, top center, or top right
center left, center center, center right
bottom left, bottom center, bottom right.