CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS background properties

With CSS background properties, you can define how the background of various elements is displayed.

This tutorial focuses on:

Setting a background color

You can use CSS to set the background color of various elements including the webpage itself, tables, textboxes and links.

The background color of an element is set with the background-color property. You can specify the background color of an element with a color name, an RGB value, or a hexadecimal value.

Example:
<html> <head> <title>Background properties</title> <style type="text/css"> body {background-color: #f0f8ff;} h1 {background-color: lightsteelblue;} p {background-color: rgb(220, 220, 220);} a {background-color: #e6dcbe;} </style> </head> <body> <h1>Some text</h1> <p> A paragraph </p> <a href="http://www.landofcode.com"> Landofcode.com main page </a> </body> </html>
Output:

Setting a background image

You can use CSS to set a background image for various elements including the webpage itself and tables.

The background image of an element is set with the background-image property. The value this property takes should be the location of the image specified within a url() identifier.

Example:
<html> <head> <title>Setting a background image</title> <style type="text/css"> body {background-image: url(/images/ob020.jpg);} table {background-image: url(/images/apple.jpg);} </style> </head> <body> <table border="2"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </body> </html>
Output:
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information