Scribd
Upload
13 views12 pages

Lesson 10 Colours Continue

Learn more about websites

Uploaded by

mkhwanazimbali889
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views12 pages

Lesson 10 Colours Continue

Learn more about websites

Uploaded by

mkhwanazimbali889
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Lesson 10

Topic: CSS Backgrounds

Objectives:
 learn about the CSS background properties
Outcomes:
 Styling components in CSS

Notes:

The CSS background properties are used to add background effects for
elements.

In this lesson we look at the following CSS background properties:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

CSS background-color
The background-color property specifies the background
color of an element.

With CSS, a color is most often specified by:


 a valid color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Other Elements
You can set the background color for any HTML elements:

Opacity / Transparency
The opacity property specifies the opacity/transparency
of an element. It can take a value from 0.0 - 1.0. The
lower value, the more transparent:
Note: When using the opacity property to add
transparency to the background of an element, all of
its child elements inherit the same transparency. This
can make the text inside a fully transparent element
hard to read.

Transparency using RGBA


If you do not want to apply opacity to child elements,
like in our example above, use RGBA color values. The
following example sets the opacity for the background
color and not the text:

You learned from our CSS Colors Chapter, that you can
use RGB as a color value. In addition to RGB, you can
use an RGB color value with an alpha channel (RGBA) -
which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green,
blue, alpha). The alpha parameter is a number between
0.0 (fully transparent) and 1.0 (fully opaque).

CSS Background Image

CSS background-image
The background-image property specifies an image to
use as the background of an element.
By default, the image is repeated so it covers the entire
element.
Note: When using a background image, use an image
that does not disturb the text.

The background image can also be set for specific


elements, like the <p> element:
CSS Background Image Repeat
CSS background-repeat
By default, the background-image property repeats an
image both horizontally and vertically.
Some images should be repeated only horizontally or
vertically, or they will look strange, like this:

if the image above is repeated only horizontally


(background-repeat: repeat-x;), the background will
look better:
Tip: To repeat an image vertically, set background-
repeat: repeat-y;

CSS background-repeat: no-repeat


Showing the background image only once is also
specified by the background-repeat property:

In the example above, the background image is placed


in the same place as the text. We want to change the
position of the image, so that it does not disturb the
text too much.

CSS background-position
The background-position property is used to specify the
position of the background image.
CSS Background Attachment
CSS background-attachment
The background-attachment property specifies whether
the background image should scroll or be fixed (will not
scroll with the rest of the page):
CSS Background Shorthand
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the
background properties in one single property. This is
called a shorthand property.
Instead of writing:
You can use the shorthand property background:

When using the shorthand property, the order of the


property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
It does not matter if one of the property values is
missing, as long as the other ones are in this order.
Note that we do not use the background-attachment
property in the examples above, as it does not have a
value.
Exercise:
Set the background color of the <h1> element to
"lightblue".
<style>
h1 {
[ ]: lightblue;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

All CSS Background Properties


----------------------------------------END OF
Lesson---------------------------------------------

You might also like