Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

General HTML

2011092101 Email to Ronx
 

Order of CSS backgrounds and CSS rules

Examples showing how CSS background color and background image order affects rendering


The frame below shows examples of how the order of CSS rules can change the appearance of a web page, and also the demonstrates how the difference between background-color and background-image affects the page.

Each example uses one of two CSS files and one of two style blocks embedded in the <head> section of the pages used in the frame.

For example:

<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {background-color: blue; }
p {color:#ff0000; }
</style>
</head>

 

The CSS blocks are:

  1. <style type="text/css">
    body {background-color: blue; }
    p {color: #ff0000; }
    </style>
  2. <style type="text/css">
    body {
    background-color: blue; 
    background-image: url(/images/cyan.gif) 
    }
    p {color: #ff0000; }
    </style>

and the contents of the CSS files are:

  1. body {background-color: green; }
  2. body {
    background-color: green; 
    background-image: url('/images/tabs2.gif') 
    }