MENU


Background

background(shorthand)

...background-color
:#ff0000: sets the background color to be red.
:transparent: no color; default.
(more info here)

...background-image
:url('a.gif'): sets 'a.gif' to be the background image.
(more info here)

...background-attachment
:fixed:fixes relative to the viewport.
:scroll: fixes relative to the element.
:local: fixes relative to the contents.
:local, scroll, local: fixes three background images.

...background-position
:left top: sets the image at top left.
:bottom center: sets the image at the bottom center.
:right: sets the image at the center right.
:30% 50%: sets the image at x=30%,y=50%.
:100px 120px:sets the image at x=100px,y=120px.
:top 30vh right 5vw: 30vh from top border, 5vw from right border.
:bottom 30vh left: 30vh from bottom border, 0 from left border.

...background-size
:cover: scales until the region is fully coveredwith the image.
:contain: scales until the region just contains the image completely.
:50px 80px: scales the width=50px, the height=80px.
:50% 80%: scales the width=50%, the height=80% of the region.

...background-repeat
:no-repeat: does not repeat the image.
:repeat: repeats the image horizontally and vertically. Default.
:repeat-x: repeats the image horizontally.
:repeat-y: repeats the image vertically.
:space: repeats without clipping by inserting space.
:round: repeats without clipping by scaling.
:space round: 'space's out horizontally and 'round's up vertically.
Spacing out the background images of the first layer('cow.jpg') reveals the second layer ('tile.jpg') behind. Compared with the method of using the <img> tag, displaying images on the background prevents direct downloading through right-clicking.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   div{
      background: round space center url('/shared/cow.jpg'),
                  top left / 10% 80px repeat url('/shared/tile.jpg'), 
                  green;
      background-attachment: local, fixed;
      width:800px;
      height:500px;
   }
</style></head><body>
    <div></div>
</body></html>
...background-origin
:border-box: starts at the border box.
:padding-box: starts at the padding box.
:content-box: starts at the content box.

...background-clip
:border-box: paints on the border box.
:padding-box: paints on the padding box.
:content-box: paints on the content box.

background-blend-mode (merging list of multiple backgrounds)
:normal
:multiply
:screen
:overlay
:darken
:lighten
:color-dodge
:color-burn
:hard-light
:soft-light
:difference
:exclusion
:hue
:saturation
:color
:luminosity
:multiply screen overlay: 3 different modes for the images, repeated and/or truncated until the end.

RESETRUNFULL
<!DOCTYPE html><html><head><style>
    div {
       background: no-repeat center / cover url('/shared/cow.jpg'), 
                   linear-gradient(to right, black, white);
       background-blend-mode: screen;
       width:800px;
       height:500px;
    }
</style></head><body>
   <div></div>
</body></html>
The use of negative x and y positions shifts the image up and left. This allows the right and bottom parts of the image to be displayed. Note the use of 'display'.
RESETRUNFULL
<!DOCTYPE html><html><head>
   <style>
       #spriteslist {list-style:none;}
       #spriteslist li, #spriteslist a  {height:60px;display:block;}
       #star{left:0px;width:60px;}
       #star{background:url('/shared/css-sprites.gif') 0 0;}
       #star a:hover{background: url('/shared/css-sprites.gif') 0 -65px;}
       #heart{left:63px;width:67px;}
       #heart{background:url('/shared/css-sprites.gif') -65px 0;}
       #heart a:hover {background: url('/shared/css-sprites.gif') -65px -65px;}
       #hexagon{left:129px;width:60px;}
       #hexagon{background:url('/shared/css-sprites.gif') -135px 0;}
       #hexagon a:hover {background: url('/shared/css-sprites.gif') -135px -65px;}
   </style></head><body>
   Whole Image: <br /><img src="/shared/css-sprites.gif"/><br /><br /><br />
   Sprites:
   <ul id="spriteslist">
      <li id="star"><a href="/shared/css-sprites.gif"></a></li>
      <li id="heart"><a href="/shared/css-sprites.gif"></a></li>
      <li id="hexagon"><a href="/shared/css-sprites.gif"></a></li>
   </ul>
   <p style="float:none;">
      Pointing the mouse at a shape changes its color to black.
  </p></body></html>