Enter Information Technology Center

 4: 
Background
1. :
CSS background properties  background effects  element  
CSS properties #
background effects $':
> background-color
> background-image
> background-repeat
> background-attachment
> background-position
2. Background Color:
Background-color property )*, background  element 
Background color page , body selector:
Ex:

CSS

www.enteritc.com

19




Enter Information Technology Center

Background color 2,:

>3456 ("red"/"blue"/"green")
> RGB color ("rgb(255,50,75)")
> Hex color ("#ff0000")
IKN* h1, p, div elements $ background colors T:

20

www.enteritc.com

CSS




CSS

Enter Information Technology Center

www.enteritc.com

21




Enter Information Technology Center

3. Apply Styles with DIV and SPAN Tags:

 DIV )* style  blog ,XZ blank lines [NN

*X <p>element SPAN ' inline tag )* Z
style [ paragraph ,56w
Ex:

22

www.enteritc.com

CSS




Enter Information Technology Center

4. Background Image:
Background-image property )*,
z)' background  element
 '4Iz, repeat  element $
Background Image page , body selector:
Ex:

2 body { background-image:url("gradient.jpg");}
2 body { background : url ("gradient.jpg");}

CSS

www.enteritc.com

23




Enter Information Technology Center

5. Background Image-Repeat Horizontally and Vertically:

'4Iz, repeat Kw  element $

 Background Image repeat w
> background-repeat : repeat-x;
 Background Image repeat 
> background-repeat : repeat-y;
 Background Image )* repeat 
> background-repeat : no-repeat;
Ex:

24

www.enteritc.com

CSS




Enter Information Technology Center

6. Background Image-Position:
I Background image  background-position property:
Background-position:

top

left

top

center

top

right

center left
center center
center right
bottom left
bottom center
bottom right

CSS

X%

Y%

Xpos

Ypos

www.enteritc.com

25




Enter Information Technology Center

Ex:

26

www.enteritc.com

CSS




Enter Information Technology Center

7. Background-attachment:
2)* BackgroundImage ,2X I* scroll '
Page 2X fix ' page , background-attachment property
background-attachment :

scroll
fixed

Ex:

8. Background-Shorthand property:
Kw $'
background property * background property value 

2 properties K[ background property w

shorthand property
shorthand property background "background":
Ex:

Body { background:#ffffff url("img_tree.jpg") no-repeat top right)

[ shorthand property KK value KI,X
N*:

CSS

1.

background-color

2.

background-image

www.enteritc.com

27




Enter Information Technology Center

3.

background-repeat

4.

background-attachment

5.

background-position

$
) K' property value , , , value
  ,6

9. #:

28

www.enteritc.com

CSS