Background images

The background attribute applies to an HTML page or a page element as <div> or <p>. It can also be used to place an image next to a text, and for this we shift the text with the padding or text-indent attribute. Specifically, we can replace individual list bullets this way while CSS 2.0 allows only to set the image to the wholel list.

The background color or image and all other parameters can be defined in a single command:

background: color image position  repeat attachment

For example:

background: blue url(back.jpg) 10% 10% no-repeat scroll 

Some parameters have meaning only with an image.

It is possible to specify each property in a separate line.
Example:

background-color:blue;
background-image:url(img.jpg);
background-position: left top;
background-attachement:fixed;
background-repeat: no-repeat.

background-color

The color can be:

background-image

It specifies the URL of an image without quotes. This may be:

Specifying both a color and an image is useful when the image is shifted.

background-position

Sets the image offset in the container. Do not apply to the background color.
It can be indicated by absolute values, by percentages, or by keywords.

Note that if you give a margin and that the image is repeated, the margin will be filled by the fact that a texture fills the container.

background-attachment

Specifies whether the image is held with the page (or the element) or if it is fixed, in this case the contents move over the background.
By default, the background accompanies the content.

background-repeat

Indicates whether the image should be repeated and used as texture. The values are:

Background in CSS 3

New properties were added, when the properties already in CSS 2, they have additional parameters.

JavaScript

The background and its properties can be changed dynamically. In the compact form we change the background and its parameters as follows:

document.body.style.background = "white url (img.jpg) left top scroll both"; 

The names of individual parameters are different from the CSS names, and so background-color becomes backgroundColor, and the same for the other parameters.

The assigned value must be given in quotes, single or double.

The source code of the demo shows a complete example of dynamic change in JavaScript.

Compatibility

As always, the differences come with Internet Explorer 6 and 7. In these versions, the border, whose width is defined by the border attribute is not included in the background, as it should be and as it is with other browsers.

Reference: CSS 2.0 background Specification. CSS 3.0 Background specification.

How to set dynamically images on the background

To show how the color of the background of a page or the image may be changed dynamically, a JavaScript function alters the of this CSS attribute.

The compact format:

background: couleur url(image) x y scroll/fixed both/repeat-x/repear-y/no-repeat

For images, you can use images / url (10.jpg) and replace 10 by 20, 50, 60, 80.
For the position, giving x and y values or a percentage followed by px.
Ex: 10px 10px.

Enter a list of parameters to the background attribute:

The JavaScript function:

function setBackground()
{
var b = document.getElementById("back").value;
document.body.style.background=b;
}

The settings my be changed individually, for example to change the image:

function setImage(img)
{
  document.body.style.background=img;
}

Important!

If you assigned a background color for HTML, with for example:

HTML, BODY
{
   background:white;
}

then you can not dynamically change the page background, at least on Firefox.

You need to fix the stylesheet ...

BODY
{
   background:white;
}  

See also

© 2010-2012 Xul.fr