HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 31. BACKGROUNDS 275


The initial image can be positioned vertically (top, center, or bottom), and
horizontally (left, center, or right). Position can also be specified using
percentages or lengths (like pixel or inch).


The image can repeat from its initial position, in either the x direction
(horizontally) or the y direction (vertically) or both.


http://www.w3schools.com/cssref/pr_background-position.asphas more.


31.2 Opacity


Opacity is a measure of how transparent something is. An opacity of zero
means it is totally transparent. An opacity of one means it is totally opaque,
or solid, with nothing showing through. Opacity can be any numeric value
between zero and one.


In CSS,opacity: 0.5; would set opacity to half transparent, half not,
almost as though it were a ghost.


When seeking transparency, the two major choices are to use opacity, as
above, and to use a background color that is partly transparent, via rgba.
Seergbain the index for several discussions.


31.3 Gradients


Gradients are a way to create a background that shades gradually from one
color to another.


Example:body { background: linear-gradient(90deg, #aabbcc, #887766);}


http://css3gen.com/gradient-generator/has a nice linear generator.


todo: more to be added


The ColorZilla website has a gradient generator.


31.4 Overlapping Backgrounds


It is possible, and sometimes fun, to specify several backgrounds for the
same object. This can work well if the layers in front are partly transparent.

Free download pdf