|
|
|||||||||||||||||||
Controlling Background Images and ColoursThis tutorial shows you how to work with the various CSS background properties. Using CSS, you can specify things like:
Adding a nice coloured or graphical background to your Web pages is a quick and easy way to spice up your site. However, it's also very easy to make Web pages look horrible, or even unreadable with the wrong type of background! The section at the end of the tutorial will help you avoid some of the common pitfalls associated with backgrounds. Specifying background coloursThe background-color property lets you set the background colour for an HTML element. For example:
p { background-color: brown }
This is a paragraph with a brown background colour. Setting a background imageYou can use the background-image property to specify a background image for an HTML element. For example, to set a background image for a Web page, you could use something like this:
<html>
<head>
<style>
body
{
background-image: url("teepees.jpg")
}
</style>
</head>
<body>
<h1>Here is my Web Page with a background image!</h1>
</body>
</html>
Click Here to see this example in action! Note that you can also use the background-image property (and indeed any of the background properties) on tables, table cells, paragraphs, etc. Creating a "watermark" background imageBy default, a page background image will scroll with the page. However, using the background-attachment: fixed property, it's possible to create a "watermark" background that stays fixed in the same place on the screen while the page scrolls:
body
{
background-image: url("teepees.jpg");
background-attachment: fixed
}
To see how this looks, click here. Try scrolling up and down! Specifying how the background image tilesYou can see that the background image repeats itself many times, in order to fill the whole page. You can control this tiling effect using the background-repeat property, as follows:
Examples:
body
{
background-image: url("teepees.jpg");
background-repeat: repeat-x
}
Tiles the image across the page. Click here for a demo.
body
{
background-image: url("teepees.jpg");
background-repeat: repeat-y
}
Tiles the image down the page. Click here for a demo.
body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat
}
Just displays the image once. Click here for a demo. Positioning the background imageCSS gives you control over exactly where your background image is placed within the HTML element. To position your image, use the background-position property as follows:
Examples:
body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat;
background-position: 50% 50%
}
Displays the image in the centre of the page. Click here for a demo.
body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat;
background-position: 100px 50px
}
Displays the image 100 pixels to the right of, and 50 pixels below, the top left corner of the page. Click here for a demo.
body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat;
background-position: center right
}
Displays the image in the centre right of the page. Click here for a demo. Backgrounds - not just for pages!Don't forget that you can use these background properties on most HTML elements - not just the body tag. For example, here is our teepees image being used as a table background: <table style="background-image: url(teepees.jpg)"> <tr> <td><h1>Here are some teepees in a table!</h1></td> </tr> </table> And this is how it renders:
Combining properties<P STYLE="height: 10em;"> In this case, then the extra height is treated somewhat like extra padding, as depicted in Figure 8-3. ![]() Figure 8-3. Setting the height property for block-level elementsIf, on the other hand, the height is less than that needed to display the content: <P STYLE="height: 3em;"> then the browser is supposed to provide a way to see all content You can use the background property to specify all the background properties easily in one go. For example:
body
{
background: url("teepees.jpg") no-repeat center center black
}
This sets the page background to black, with the teepees image in the centre of the page, non-repeating. Click here for a demo. Some notes on style and readabilityImages that weren't meant to tileUnless you're using the background-repeat: no-repeat property, it is important that the image you're using is designed to tile. For example, this page looks horrible, because the background image that was used was not designed to tile! (Don't stare at it too long, or you might go cross-eyed!) Backgrounds that clash with textSome background images or colours may look very pretty, but if they make your page text hard to read, they're probably best avoided. If you want to use a page background image, choose one that is not too "busy", and that contrasts well with the text colour. Your turn!If you'd like to practice putting background images in your pages and page elements, try downloading some backgrounds from our ImageKits. Save the image to a folder on your hard drive somewhere, then link to it from your style sheet. The EndThat's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of my and other webmasters. If you would like to offer us feedback on this or any of the tutorials, please contact us. Have fun! |
There is one other thing you can do to influence the appearance of list items under CSS1, and that's
This will apply the values to the bottom border alone, as shown inFigure 7-45, leaving the others to their defaults.Since the default border style is none, no bordersappear on the other three sides of the element.
As you can see, the order of the actual values doesn't reallymatter. The following three rules will yield exactly the same border,as illustrated in Figure 7-47:
H1 {border-bottom: 3px solid gray;}
lined up, this means that the line box for this line is now only 12pixels high, just like the others. However, it also means that theoversized text intrudes into other lines even more than before.Let's consider another situation where another inline elementis in the same line as the boldfaced text, but its alignment is otherthan the baseline:
<P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
As Figure 7-58 demonstrates, the
background of an element extends into the
padding. As we discussed before, it also extends to the outer edge of
the border, but the background has to go through the padding before
it even gets to the border.
The default value of padding is
0 (zero), and padding values cannot be negative.
WARNING