Exit tutorial
 Cascading Style Sheet Tutorials |
| CSS Background Tricks |
| With CSS you can make a standard full
page style background tile into a left border or top border style background,
and it even works in Netscape!
(For a change...!)
It's true, with the CSS code below, a small tile can be turned into a left border background or top border background without making a new image. This opens up a whole new world of possibilities for you, as there are hundreds of standard tiles available on the Internet that you can easily turn into a left border background or a top border background with this snippet of code placed in the <HEAD> section of your HTML document: <STYLE TYPE="text/css"> That would make a left border background from a single tile. The only part you have to change is the part in parenthesis (but do not replace the parenthesis, they are necessary), change that to your image path and name. You may also want to change the repeat scheme. To change the repeat scheme, change the part after the last colon using a choice from below. repeat ...Adding this value just makes your background image tile like it does with the regular body background tag. No sense in using it really, if that's all you want to do. no-repeat ...This will make the image appear once in the upper left hand corner. For a left border image it will appear across the whole page at the top. repeat-y ...Adding this tag makes your background image tile vertically on the left side. Use this to make a left border bg from a standard tile. repeat-x ...Adding this tag makes your background image tile across the top of the page. Use this to make a top border bg from a standard tile. Here are some samples to show it in action: Left
Border Style How about that right border background you promised? Well, yes, how about that! It will work in IE but possibly not in Netscape, so you'd only want to use it if you serve up your site up in two flavours or just don't care about Netscape users. You'll find the code for that on this sample page. |