[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

All topic groups:
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groups > Front page of CSS-guide > Guide pages > 8. How to set CSS for backgrounds and borders &Backgrounds properties (section 1/

Background properties

Relative simple background definitions are not problematic and they can be defined only to element BODY like in HTML 3.2 documents. Most used background properties are in the following example ([M][S][Pw] - they are commonly expressed as shorthand properties[S][Pw], but now I express them as individual properties and I explain shortly, what they mean):

body
{background-color: white;
background-image: url(./Taulut/kierrevihko.gif); /* this correspond normal HTML 3.2 level background image definition */
background-repeat: repeat-y; /* defines if the image repeats or or not and how it repeats */
background-attachment:fixed; /* defines if the image scrolls along the document or not */
background-position: 2px 0px;} /* defines the position of the image */

The background-color value can be also transparent, when the color of the parent element shine through. Even if some validator services suggest to set always the background-color property if the color property is set, this is not always reasonable. It is enough that the background color of the element BODY works well with used text colors.

Values for background-repeat: repeat (default value), no-repeat, repeat-x, repeat-y (y=repeat in vertical direction; x=repeat horizontal direction).
Background-attachment:fixed or scroll (background don't move / scroll among the document (default)).

Background-position: %, numerical unit or keyword value. Values are counted from the edges of the elements except background-attachment:fixed when values are counted according the viewport (= current window). In percentage and numerical values in first is distance from left and then distance from top. In the next table are keyword and their corresponding percentage values (I have emphasized values, which are marked at the same logic as corresponding percentage values):

top left or left top
top, top center and center top
right top or top right
left, left center and center left
center or center center
right, right center and center right
bottom left and left bottom
bottom, bottom center and center bottom
bottom right and right bottom		 0% 0%
50% 0%
100% 0%
0% 50%
50% 50%
100% 50%
0% 100%
50% 100%
100% 100%

Background properties can give to any element - especially a:hover, a:active, a:focus can be very illustrative using background properties. Read about this matter from following pages (all pages don't have return links - use instead alternative windows):

W3C: CSS1: CSS1 Test Suite; CSS2: 14 Colors and Backgrounds; 14.2.1 Background properties[Pw].

My recommendations:

  1. I recommend to set background properties for the whole element both for HTML and BODY elements. Be sure, that between previous mentioned elements is no border, margin or padding. The most lest problems with background is when non-transparent JPG-images has been used.

  2. Images must have high quality. Images should be tested in many applications. If some application can't read images those images should not be used.

  3. If you set background position values, set always two values. I recommend to use pixel or percentage values. Don't use combinations like 10px center.

  4. Don't set background properties for :first-letter and :first-line pseudo-elements.

  5. I don't recommend to use background images for the :hover pseudo-class.

Browser-specific notes:

  1. background-color: transparent doesn't work correctly in all browsers, because some browsers set the background-color according to the BODY-elements in situations, where they should not to do it. Some browsers might need this value to image links with pseudo-classes (a:link img, a:visited img {background-color:transparent}) even if the background color of underlying element should as default shine through. Setting sometimes certain background colors and sometimes transparent color cause also problems and all background-color values don't work.

  2. Background properties for HTML and BODY elements don't always work in MS IE browsers, if pages are inside framesets. In MS IE 4.x for Windows the combination transparent GIF + background color newer work with the HTML element.

  3. Opera doesn't support backslashes (\) in background image path names (for example .\images\image1.gif).

  4. Both beta and official version of Opera 7.x browser can't use some GIF-images as backgrounds (also some other applications like MS Windows XP has problems with them and image, which Opera has problems don't work in Windows XP as thumbnail images). Randomly but quite seldom Opera has also problems with background colors. I handle a special matter in an [S], which handles Opera.

  5. Combinations like background-position: 10px center don't work properly at least in some Mozilla Gecko browsers.

  1. The keyword and percentage values (for example center and 50% 50%) to the background-position property don't work always properly in Opera 5.12. Horizontal percentage values work and they can be used together with vertical pixel values, for example 50% 200px (this bug have been fixed in the Opera 6.x series). Indeed in the CSS1 Test suite these values work with the P element. This matters seems to be element dependent and at least Opera has difficulties with the BODY element. I recommend to use the following kind of definition, which I have used in this page:

    <style type="text/css" media="screen">
    <!--
    div#first {background: white url("../Kuvat/Css/Tree.gif) no-repeat 100px 65px;} /* media types print and projection have their own definitions */
    -->
    </style>

  2. Opera doesn't support background images for dynamic and link pseudo-classes[S] (fixed in Opera 7.0 Beta 2).

  3. If tables or table cells have transparent background images Opera renders only in tables/ table cells the background color of the ancestor element, not the background image of it.

  4. Background properties don't work in Opera 7.x for :first-letter.

  5. Background properties for the :first-line pseudo-element crashes MS IE 5.5 for Windows.

  1. Positioning of the background image might cause that the background goes over other elements in MS IE 4.x for Windows.

  2. If the background image is a GIF-animation, Opera 5.x and older browser version render only the first image, not the whole animation (this matter has been fixed in the newest versions and I have tested this matter with Opera 6.04).

  3. MS IE, Opera, Mozilla Gecko, Safari (Mac) and Konqueror (Linux) support PNG images but MS IE 4.x-6.x and Opera 4.x-5.x don't support transparency of PNG-images. In some Mozilla Gecko Linux-browsers at least partially transparent PNG-images work very bad. In Konqueror some PNG-images work bad.

  4. background-attachment:fixed works only in quite new browsers. In my tests with MS IE it works only for elements HTML and BODY. In Opera 4.x+ and Mozilla Gecko browsers it works wider. Indeed Opera scrolling might cause temporary broken texts. In addition Opera 6.x calculates the position incorrectly according to the container element, not according to the viewport as it should be calculated (fixed in Opera 7.0 Beta 2).

  5. The definitions of the place of the background images don't work in Netscape 4.x browsers.

  6. Netscape 4.x doesn't correctly read relative references. If you want that background images works also with Netscape 4.x read my hints[S][Pw], how you can define relative references to Netscape 4.x.

[Top]