CSS Background
·
CSS
background properties are used to define the background effects of an element.
·
CSS
properties used for background effects:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
·
The
background-color property specifies the background color of an element.
·
The
background color of a page is defined in the body selector:
Example
Body {background-color: #b0c4de ;}
With
CSS, a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
Example1:
<! DOCTYPE html>
<Html>
<Head>
<Style>
h1
{
Background-color: #6495ed;
}
P
{
Background-color: #e0ffff;
}
Div
{
Background-color: #b0c4de;
}
</style>
</head>
<Body>
<h1>CSS background-color example!</h1>
<Div>
This is a text inside a div element.
<p>this paragraph has its own background color. </p>
We are still in the div element.
</div>
</body>
</html>
Background Image
Syntax
Body {background-image: URL ('paper.gif') ;}
Background - Shorthand property
·
As
you can see from the examples above, there are many properties to consider when
dealing with backgrounds.
·
To
shorten the code, it is also possible to specify all the properties in one
single property. This is called a shorthand property.
·
The
shorthand property for background is simply "background":
Example
Body {background: #ffffff URL ('img_tree.png') no-repeat right top
;}
When
using the shorthand property, the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
It
does not matter if one of the property values is missing, as long as the ones
that are present are in this order.
No comments:
Post a Comment