Introduction to CSS Backgrounds - Lesson 3

1
Introduction to CSSBackgrounds - Lesson 3

• Publisher Attitude Academy

2
What is Background CSS

• In this lesson we will learn how to apply
  background Properties on a webpage or websites.
  We will also look at advanced methods to position
  and control background images. The following CSS
  properties will be explained
• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position
• Background

3
Background
The Background-color The background-color
property is used to set the background color of
an element Following is the example, which
demonstrates how to set the background color for
an element.
Example Here
ltdiv style"background-color green" gtThis text
has a Green background color. lt/divgt
This text has a Green background color.
4
Background
The Background-images The background-image
property is used to set the background image of
an element. Following is the example, which
demonstrates how to set the background images for
an element.
Example Here
ltdiv style"background-imageurl(browse path)
"gtMore css Property add for give size of images
lt/divgt
This div show image according content area
5
Background
The Background-Repeat The background-repeat
property is used to control the repetition of an
image in the background. The following example
demonstrates how to repeat the background image
if an image is small. You can use no-repeat value
for the background-repeat property if you don't
want to repeat an image. In this case, the image
will display only once.
We have four type of repeat value Repeat
This property repeat to background images
No-repeat This property no-repeat to
background images Repeat-x This
property repeat to background images only
Horizontally Repeat-y This property
repeat to background images only Vertically By
default, the background-repeat property will have
a repeat value.
6
Example Here
ltdiv style" background-imageurl(browse path)
background-repeat repeat "gtMore css Property
add for give size of images lt/divgt
The following example demonstrates how to stop
repeating the background images
Example Here
ltdiv style" background-imageurl(browse path)
background-repeat no-repeat "gtMore css Property
add for give size of images lt/divgt
The following example demonstrates how to repeat
the background image horizontally
7
Example Here
ltdiv style" background-imageurl(browse path)
background-repeat repeat-x "gtMore css Property
add for give size of images lt/divgt
The following example which demonstrates how to
repeat the background image vertically
Example Here
ltdiv style" background-image url (browse path)
background-repeat repeat-y "gtMore css Property
add for give size of images lt/divgt
8
Background
The Background-Attachment Background
attachment determines whether a background image
is fixed or scrolls with the rest of the
page. The following example demonstrates how to
set the fixed background image.
9
Example Here
ltdiv style" background-image url (browse path)
background-attachment fixed"gt This paragraph
has fixed background image. lt/divgt
The following example demonstrates how to set the
scrolling background image.
Example Here
ltdiv style" background-image url (browse path)
background-attachmentscroll"gt This paragraph
has scrolling background image. lt/divgt
10
Background
The Background-Position The following example
demonstrates how to set the background image
position 100 pixels away from the left side.
11
Example Here
ltdiv style" background-image url (browse path)
background-position100px"gt Background image
positioned 100 pixels away from the left. lt/divgt
The following example demonstrates how to set the
background image position 100 pixels away from
the left side and 200 pixels down from the top.
Example Here
ltdiv style" background-image url (browse path)
background-position100px 200px"gt This table
has background image positioned 100 pixels away
from the left and 200 pixels from the top.lt/divgt
12
Background
The Background You can use the background
property to set all the background properties at
once. For example
Example Here
ltdiv style"background url (/images/pattern1.gif)
repeat fixed 100px 200px"gt This paragraph has
fixed repeated background image. lt/divgt
13

• Visit Us Attitude Academy