Handy
Tip: When
coding CSS, you can use browser safe colors such as black, blue,
green etc, or you can use hexidecimal color codes
|
 Bookmark
This Page
Cascading Stylesheets Tutorial #9
Colors, Background Colors and Background Positioning.
Color
Example code ....
<STYLE TYPE="text/css">
<!--
b { color: 63639C }
-->
</STYLE>
Color uses the same values as html and what happens is that you actually
specify the "foreground" color of the text.
The example code has been applied to all bold text on this page.
You can use all browser safe colors such as black, blue, green,
etc, or you can use hexidecimal color codes. When using hex color
codes you do not have to use the # sign, just the color code such as 63639C
Click here for a hexidecimal
color chart
You can also use RGB colors, which are used in graphics applications such
as Photoshop and Paint Shop Pro.
Background Colors.
Example code ....
<STYLE TYPE=text/css">
<!--
H4 { background-color: FFFF66 }
-->
</STYLE>
Here's where CSS get's exciting. Usually, to put color behind an element
using html, you would have to make a table cell and fill the cell with
color, or make use of the span tag every time you wanted to have the color
behind text. Now here's a much easier way using css.
The example code was used in each part of this paragraph, and you
can apply it anyhow you wish. To full paragraphs or just a single
letter.
You can use color names, hex colors or RGB codes.
You can also apply the background-color property a value of transparent.
This means that the background any inherited background color is ignored
and you'll see whatever background would normally show through.
background-image
Example code ....
<STYLE TYPE="text/css">
<!--
H4 { background-image: url(images/hypermouse.gif) }
-->
</STYLE>
Click
here to view an example That's the example code at work above, applied
only to that paragraph. You can apply a background image to just two words, or
if you want to apply the background image to all of your document, place the code
within the body tag like this
BODY { background-image: url(images/hypermouse.gif)
}
You can call the image using the relative url or you can use the full
path such as; http://www.hypergurl.com/images/hypermouse.gif
If you are
using a transparent gif you can use also specify background color. The background
color will appear while the graphic is loading and show through any transparent
regions of the gif.
Controlling Background Images
Example
code ....
<STYLE TYPE="text/css">
<!--
H2
{ background-repeat: no-repeat; background-image: url(images/hypermouse.gif) }
-->
</STYLE> Now here's a great example of positioning
and controlling background images
You can control how an image
behaves, if they should tile or not, and where you want the image positioned.
As the example shows, background-repeat: no-repeat: stops the
image from tiling.
A value of repeat-x makes the image tile horizontally.
A value of repeat-y makes the image tile vertically.
You can make
the image display exactly where you specify behind the element you're applying
it to.
<STYLE TYPE="text/css">
<!--
H3 { background-position: center top; background-repeat: no-repeat;
background-image: url(images/hypermouse.gif) }
-->
</STYLE>
The keywords here are,.... vertical alignment: right, center,
left
horizontal alignment: top, center and bottom.
You can
apply all the normal length values of px, percent, etc, which gives you even more
control over where you position the image. An example:
<STYLE TYPE="text/css">
<!--
H3 { background-position: 35px 75px; background-repeat: no-repeat;
background-image: url(images/hypermouse.gif) }
-->
</STYLE>
Shorthand Method of Coding.
And another way to set your CSS
code is to just use the background tag and include everything you want within
like this.
<STYLE TYPE="text/css">
<!--
H5{
background: url(images/hypermouse.gif) 99FF99 no-repeat center center }
-->
</STYLE>
This is an example of the above code in action. As
you can see I have set the graphic to appear on the left. Some browers will render
this differently so play around to get it to suit. This is a really great way
to place an image behind a paragraph of text and control everthingto your liking.
There is much motre to css than just controlling font types and the favorite no
underline on links.As you can see with the code, I have applied a background
image, a background color behind the image, applied the no tiling command and
centered the image vertically and horizontally. This is the best way to code your
backgrounds and is much more browser friendly.
Fixed Backgrounds.
If you want your background fixed, or not to scroll with the page, use the background-attachment
like this to the body tag.
<STYLE TYPE="text/css">
<!--
BODY { background-attachment: fixed; background-image: url(images/hypermouse.gif)
}
-->
</STYLE>
Next CSS tutorial ...
Absolute and Relative
Positioning.
|
|
Website
Design
|
