ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


  Home > Courses, Tutorials & eBooks > CSS Tutorial > Working with Backgrounds

CSS Tutorial - Working with Backgrounds

                                                                                                                 Page 1 of 1

In this chapter you will learn:

  • Various background options
  • Choosing background colors
  • Placing images as a background

The background of any website is very important. Wrong use of colors in the background of a page won't lend an attractive sight to the text. If you choose a dark color for background and a light color for the text, then the text won't be really legible. Professional websites tend to apply light background with dark text.

The CSS background properties allow you to control the background color of an element. Besides, you can also place images in the background. Images can be placed either horizontally or vertically.
Different style options in context to background are explained below: 

Background Color

  • The background color property adds a background color for an element.
  • This property can have the values- color-name, color-RGB, color-hex, and transparent.
  • Either the color name, or the amount of red, green and blue using RGB can be specified. In addition, even  a hexadecimal number or the option of no color can be specified.
  • By default background color property value is transparent.


p { background-color : yellow;}

                    Lists are a fundamental way of organizing data in a linear way, one item after another.

                   p { background-color : #887799;}

                    Lists are a fundamental way of organizing data in a linear way, one item after another.

                     p { background-color : rgb(150,200,250);}

                     Lists are a fundamental way of organizing data in a linear way, one item after another.


Background Images

  • CSS lets you set a background image for both the page and single elements on the page.
  • It can have the values- none or url.
      None specifies no background image is to be set.
      Url  specifies the path to an image.

In addition, CSS offers several positioning methods for background images. The background-repeat property determines how a specified background image is repeated. 

  • Background repeat property can have the values- repeat, repeat-x, repeat-y, no-repeat.
      repeat - This will tile the image until the entire page is filled. The background image will be repeated horizontally and vertically.
      repeat-x - This will repeat the background image horizontally.
      repeat-y - This will repeat the background image vertically.
      no-repeat - This will display the background image only once.


p{ background-image : url ("C:\backup\Sonoworld\Administrator\Admin\Images\adminpanel.gif");

                           background-repeat : repeat-x ;}         


Our eyes are naturally attracted to motion, and some of the most successful pages exploit this by means of  an easy technique called animation. Animation is a very easy way to add motion to the page in comparison to video.



In this chapter you have learnt:

  • Setting background colors
  • Placing images in the background
  • Tiling images horizontally or vertically
Review Questions

Fill in the Blanks

  1. The default background color property value is _____.
  2. Background image property can have values _____ or _____.
  3. Background images can be placed _____ or _____.
  1. Transparent.
  2. None, url.
  3. Vertically, horizontally
Show background effects on a web page
View Code        View Runtime
What's Next

The next chapter will acquaint you with how to work with fonts. It will discuss other font options like font-family, font-size, font-stretch and font-variant.

               Hop over to the next chapter to get a close-up on fonts.



Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.