Comments
These pages, about CSS, are really too busy for normal websites but then, they are just exercises and demonstrations.
A pictorial background considerably reduces readability and should not normally
be used. A title page (like a book cover) might be an exception.
Other possibilities would be to have an image over part of a page
but that would be better achieved with a separate image rather than a background.
It's probably best to use a block element with a plain and contrasting colour to the text.
Unfortunately, only part of the background image is produce with a smartphone and consequently, much of the effect is lost.
Willow Positions
See the positions of block elements against a willow background
Fixed willow leaf background, linear gradient colour background and samples of static, absolute, relative and fixed block elements.
The absolute position, which is relative to the first containing ancestor whose position is not static, may be adjusted by such as left and top.
It's difficult to see what use the absolute position might be ! It becomes quite a problem with different screen sizes.
The date at the top of this page is in a "position:absolute" block element and its position has been adjusted with "top: 30px;
right:10px;", within the style specified in the head section.
Fixed block is fixed to the view port (screen) and is OK for small items such as for navigation up.
Larger fixed blocks get in the way with small screen sizes.
To help with this, the width could be set to a percentage but this will cause an increase in height of the element.
Static is the default position but cannot be adjusted.
Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)
CSS3 Linear Gradients
To create a linear gradient you must define at least two color stops.
Color stops are the colors you want to render smooth transitions among.
You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}