Background
You can style the background of an
element in one declaration with the background property.
background: #ffffff
url(path_to_image) top left no-repeat fixed;
Values:
- attachment
- color
- image
- position
- repeat
Background
Attachment
If you are using an image as a
background. You can set whether the background scrolls with the page or is
fixed when the user scrolls down the page with the background-attachment
property
background-attachment: value;
Values:
- fixed
- scroll
Background
Color
You can specifically declare a color
for the background of an element using the background-color property.
background-color: value;
Values:
- color name
- hexadecimal number
- RGB color code
- transparent
Background
Image
You can set an image for the
background of an element using the background-image property.
background-image:
url(path_to_image);
Values:
- url
- none
Background
Position
You can position an image used for
the background of an element using the background-position property.
background-position: value;
Values:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- x-% y-%
- x-pos y-pos
Background
Repeat
You can set if an image set as a
background of an element is to repeat (across=x and/or down=y)
the screen using the background-repeat property.
background-repeat: value;
Values:
- no-repeat
- repeat
- repeat-x
- repeat-y
<HTML>
<HEAD><TITLE> Working with Style Sheets using Background Attributes</TITLE>
<STYLE
Type = "text/css">
p { background-image: url(Sunset.jpg);
background-position:20px
40px;}
h4{ background-image: url(Sunset.jpg);
background-position: top
left}
</STYLE></HEAD>
<BODY>
<P>With
background position in pixel</P>
<H4> with
background position in top left corner</H4>
</BODY>
</HTML>
How To Set BackGround AttechMent in CSS
<HTML>
<HEAD><TITLE> Working with Style Sheets using Color and
Background Attributes</TITLE>
<STYLE
Type = "text/css">
.noScroll {
background-image: url(Sunset.jpg);
background-attachment: fixed;}
textarea {
background-image: url(Sunset.jpg);
background-attachment: scroll;}
</STYLE></HEAD>
<BODY>
<textarea
class='noscroll'
rows=13 cols=4>With
background repeat yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</textarea>
<textarea
rows=13 cols=10> Silicon
Chip Technologies rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr<BR>
yyyyyyyyyyyyyyyyyyyyyyyy
ddddddddddddddddddd
dddddddddddddddddddddddddddddd</textarea>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE> Working with Style Sheets using Color and
Background Attributes</TITLE>
<STYLE
Type = "text/css">
H4 { background-color: white;
}
P { background-color:
#1078E1; }
U { background-color: rgb( 149,
206, 145); }
</STYLE></HEAD>
<BODY>
<U>With
background repeat</U>
<H4> Silicon
Chip Technologies</H4>
<P>A private
limited company, which was founded in December 1989. The vision of this company
is to provide any corporate client a single entity which addresses all their
Software Development, Technical and User Documentation, Training and Manpower
Recruitment needs. </P><BR>
<U>With
background no-repeat</U>
<H4> Silicon Chip Technologies</H4>
</BODY>
</HTML>
0 comments:
Post a Comment