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:

A color name, such as white, blue, etc.
A code like #002244.
The word transparent to do not show a background color. This is the default.

background-image

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

a local URL like url (img.jpg) or url (images/img.jpg)
or a relative URL
an absolute URL like url (https://www.xul.fr/img.jpg).

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.

10px 20px gives a margin of 10 pixels to the left and top.
5% 10% creates a left margin of 5% of the width and a top margin of 10% of the height.
left aligns the image to the left (default).
top aligns the image to the top (by default).
right is equivalent to 100% (less the width of the image), the image is aligned at right.
bottom aligns the image at the bottom of the container.

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.

fixed: The bottom is fixed, the content is moved ahead.
scroll: The bottom is held with the content.
inherit: As the parent container.

background-repeat

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

repeat-x: repeat horizontally.
repeat-y: vertical repetition.
no-repeat: no repeat.
default, the image is used as texture.

Background in CSS 3

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

background-image
background-clip
background-size
background-origin
background-break
background-repeat
background-attachment

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.

backgroundColor
Exemple: document.body.style.backgroundColor='blue';
backgroundImage
Exemple: document.body.style.backgroundImage='url(images/20.jpg)';
backgroundAttachment
backgroundRepeat
backgroundPosition

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.

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;
}