microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Web... | Specifying... | 5.3 Color and background... | Examples... next


5.3 Color and background properties examples


Background color

Simple highlighting effects can be obtained by specifying a background color to an inline tag. 

.highlight { background: tomato }
background example

And by specifying the same color for both text and the background, sinister censorship style effects can be created. 

.censored { background: black }
background example


Background graphics

Using CSS, background graphics can be applied to text, as well as other elements. Interesting results can be obtained.

This example specifies a small stripy JPEG graphic ( background image).

background example


This example specifies a small grassy .GIF ( background image).

background example


The following example specifies a small black and white transparent .GIF graphic file ( background image) to produce a degraded fax style effect. 

background: url(fax.gif)
background example


The background is applied to the text span which is tiled behind the text. To ensure the correct alignment of the background the font-size is specified in pixels.

To add to the effect the table cell may also have a tiled background image applied to it to give the look of degraded fax paper.

background example


Although the text becomes almost illegible it can still be selected, searched or copied, unlike graphics.



The samples shown on this page are bitmap screen captures. The CSS and HTML code used to produce them has been commented out. Use View Source to access it.

this page was last updated 30 June 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Web... | Specifying... | 5.3 Color and background... | Examples... next