Lesson 5:

CSS BACKGROUND
Background Property, Background Attachment Property, Background
Position, Background Repeat, Background Shorthand,

Prepared by: MARLON L. LALAGUNA, Master Teacher II

Techie-Terms
 Background – a CSS property that can
customize the background color or image of
web elements like the body, table or even
paragraph.
 Fixed – value of background-attachment
property, which makes the background image
steady and does not follow the scrolling action.
Techie-Terms
 Scroll – this is the default setting of background-
attachment property, which makes the
background image scrolls with the document.
 Repeat – value of background-repeat, if you
want the background image to be tiled all
throughout the page.
CSS: BACKGROUND

 With CSS, you can design so many things; you

can choose what to display as the background
and how it will be displayed. This background I
am speaking of is not only the background for a
web page but also of a, let’s say, table, or even
a cell!
 You can style backgrounds using CSS by using
different properties which are charted in the
following slides.
CSS: BACKGROUND

 The background-repeat property indicates if the

background image is to be tiled all throughout
(repeat value), repeated horizontally only
(repeat-x value), repeated vertically only
(repeat-y value) or will not be repeated nor
tiled (no-repeat value).
CSS: BACKGROUND

 The background-position property indicates

where the background will be placed. Only
works when the image is not tiled.
 The background property is a shorthand
notation for all the other properties
(background-color, background-image,
background-repeat, background-attachment
and background-position). It can be used to
style the background using only a single
property.
CSS: BACKGROUND
Output:
CSS: BACKGROUND

Output:
BACKGROUND PROPERTY
 You can specify a background image on any element
by setting the location as specified in the url(“location”).
An example would be the following syntax for the web
page body:
BACKGROUND PROPERTY
CSS BACKGROUND PROPERTY
Property Value Description
background-image: url(“location”) Set the background to the
image selected by the url
background-image: none No background
background-image: inherit Background will be the same
as the parent’s

A relative url may also be used as a source of the image for the
background.
BACKGROUND ATTACHMENT PROPERTY
This property allows you to control how the background
scrolls with the web page. There are three types, scroll,
inherit and fixed.

CSS BACKGROUND PROPERTY

Property Value Description
background-attachment: scroll Background scrolls with the document
(default setting)
background-attachment: inherit Follow parent’s attachment
background-attachment: fixed Background is steady and does not
follow scroll action
BACKGROUND POSITION
 Background can be located where the image
will be positioned on the web page by
specifying a certain value or keyword
location.
CSS BACKGROUND POSITION PROPERTY
Property Value Description
background-position: x y e.g. 100px 50px Position is specified by a pixel value or
or 20% 10% percentage
background-position: e.g. top left or Keyword is used to set the position on
center or bottom the page
right or top right or
bottom center etc.
BACKGROUND POSITION
BACKGROUND REPEAT
 You can control how an image background should
repeat in order to cover the whole area of a website or
the desired area.
CSS BACKGROUND REPEAT PROPERTY
Property Value Description
background-repeat: repeat Repeats background (default)
background-repeat: repeat-x Repeat background horizontally
background-repeat: repeat-y Repeats background vertically
background-repeat: no-repeat Do not repeat the background
background-repeat: inherit Follow the parent’s repeating setting
BACKGROUND SHORTHAND
 Background property can be combined into one line of
command by using the background shorthand property as
shown below:

background: color image repeat attachment position;

 The syntax is simply implemented by spaces in between the

background properties for example:

background: gray url(“http://www.google.com/background.png”)

repeat scroll bottom right
Activity No. 10: CREATIVE ARTICLE