Scribd
Upload
11 views

Notes

This document discusses CSS background properties. It covers CSS background colors, images, positions, repetitions and attachments. It provides examples of using RGB, hex and color picker values to specify colors. It also discusses using background images, setting positions, repetitions, keeping images fixed and shortening background property syntax.

Uploaded by

christinerearemando.dlagsbc
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Notes

This document discusses CSS background properties. It covers CSS background colors, images, positions, repetitions and attachments. It provides examples of using RGB, hex and color picker values to specify colors. It also discusses using background images, setting positions, repetitions, keeping images fixed and shortening background property syntax.

Uploaded by

christinerearemando.dlagsbc
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

) ) ) ) ) ) ) ) )

) ) ) ) ) ) ) ) )
LESSON 3 - GROUP 1

Colors and
Background
) ) ) ) ) ) ) ) ) Intro
) ) ) ) ) ) ) ) )

WHAT IS CSS?

• Cascading Style Sheet (CSS)


Is a style sheet languange used for
manipulating the style or design of a markup
languange like HTML.

Used to manage the visual presentation or


visual design of a website.
) ) ) ) ) ) ) ) ) Intro
) ) ) ) ) ) ) ) )

OVERVIEWW!!

• CSS color names


• RGB and HSL color values
• Foreground and background colors
• Tiling background images
• More selectors and external style
sheets.
EXAMPLE
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
OUTPUT
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
RGB VALUE
• With CSS, we can specify
a color by indicating a
number from 0-250. Its
syntax is rgb(0,0,0). If you
indicate 0 for the values of
red, green, and blue, the
resulting color will be
black
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
HEX VALUE

• HEX Is a short term for


hexadecimal and is identified by
CSS using the formula #000000;
with values ranging from 00 to
FF. Its color combination is also
based on RGB values.
EXAMPLE
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
OUTPUT
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
USING A COLOR PICKER
This tool makes it easy
to create, adjust,
and experiment with custom colors
for the web.
Use color picker to select a color
visually
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
CHOOSING A COLOR USING
CSS
Color plays a big part to achieve a fluid design. when
choosinga color for certain elements on the website,
remember that it must not be irritating to the eyes.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
BACKGROUND IMAGES
You can set an image as a
background with CSS. This is
almost the same as inserting a
background color.
It sets 1 or more background
images for an element.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) ) CSS BACKGROUND
) ) ) ) ) ) ) ) )

POSITIONS
You can set the background
image to repeat horizontally or
vertically by using repeat-x or
repeat-y properties for horizontal
and vertical alignments,
respectively. It sets the starting
position of a background image.
EXAMPLE
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) ) NO REPETITION
) ) ) ) ) ) ) ) )

You can use no repetition if you want to stop a


background image appearing again in the next web
page, you can use : no-repeat” property for the
background.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) ) REPETITION WITH SET
) ) ) ) ) ) ) ) )

POSITION

You can also use the no-repeat property while


setting the position of the background so that it does
not clash or contrast with the text on the foreground.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) ) UNMOVABLE BACKGROUND
) ) ) ) ) ) ) ) )

• You can also set your background as fixed, so that


when you scroll up or down your web page, the
background remains immovable.

• To keep your background fixed, scroll, or local in


CSS we can also use background-attachment
property.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) ) SHORTENING BACKGROUND
) ) ) ) ) ) ) ) )

PROPERTY SYNTAX
) ) ) ) ) ) ) ) ) SHORTENING BACKGROUND
) ) ) ) ) ) ) ) )

PROPERTY SYNTAX
When using a shortened property syntax for the
background, remember to follow property sequence. The
property sequence are background-color, background-
image, background repeat, background- attachment,
background positions, and background.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )

Thank You
By- Grp 1

You might also like