Historically Opera has been best at supporting CSS, add Opera to my home computer - looks to still be true.
CSS3 Web-site generators will often generate specific code for each browser.

• css3please.com - can modify CSS3 code and see changes in box
• css3maker.com - border-radius, transition, transform, etc.
• ColorZilla Firefox for chrome and Ultimate CSS Gradient Generator
• Advanced gradients gradientmagic implements multiple gradient as backbground and often blends them with background-blend-mode
• CSS3 button generator
• DW Creative Cloud has done a good job w CSS3
  CC 2017 & up added a good color gradient editor

Review

• margin distance from border to next element
• border width style color;
• padding distance from content to border
• float: right | left; move element right, next content upper left
• border-radius: TL TR BR BL;

An <img> tag is a replaced element, it uses it content to determine display type either block or inline.

body { background-image: url( URLpath ); } For local file you don't need url.

URL - Uniform Resource Locator

• inherit whatever is missing from current location
• Full URL protocol://server/folder/filename
• https://cim.saddleback.edu/~jstudent0/index.html
• / After Server takes you to root folder map of current Server
• .. takes you up one folder
• For these examples images is a folder at same level as webcast8.html

Image formats:

• GIF Graphic Interchange Format - can have animation, lots of GIFs, transpency, limited to 256 colors
• JPEG Joint Photographic Expert Group - bitmap color compression geared for human eye (digital camera)
  Can optimize JPEG for Web, not all JPEGs will show up on Web.
• PNG Portable Network Graphics GIF/JPEG hybird
• PNG24/PNG32 Higher Quality; PNG 32 is PNG24 w transparency.
• SVG Scalable Vector Graphics XML graphics standard.

background-repeat: repeat | no-repeat | repeat-x | repeat-y | round | space;

• background example default repeat
• H3 w default repeat and background w repeat-y
• round is similiar to repeat, but the tile is rounded so images appear closer.
• space adds space so browser doesn't clip the image - example

background-position: CSS Unit or keyword [left | center | right ] [ top | center | bottom ] ; xValue yValue;
/* middle not working in y Direction on Mozilla rendering and is not on current list; default x y or just y is center */

• background-position: center middle; and top left, bottom right; 
• background-position: center middle; with background-repeat: repeat-y;
• list-style-type: none; background-image: url(images/smallRedCircle.png);
  background-size: contain; Should get right sized image
  background-repeat: no-repeat;
  background-position: 0 0; padding-left: 1.6em;
• On DW list-style-type is under Typography
• Can use background-position: 25% 0; right in middle. But use keywords, em, px first.

background-attachment: fixed | scroll; fixed location in browser window;

background-origin: padding-box (default) | content-box | border-box;

May need to expand browser width, examples below have fixed height.

background-origin: border-box; image is relative to upper left of border.

background-origin: padding-box; origin is relative to the padding. This is the default value.

background-origin: content-box; origin is relative to the content; content has a height:1.5 em;

background-clip: padding-box | bounding-box (default) | content-box;

background-clip: border-box; image is clipped on border - default

background-clip: padding-box; image is clipped at end of padding.

background-clip: content-box; image is clipped to size of content, 1.5em;

background-size: cssunit | contain | cover | auto; auto maintain image perspective.

background-size: 200px 200px; .

background-size: 200px auto; square circle maintains the same size.

background-size: contain; background image is reduced in size till if fits

background-size: cover; image placed in middle center tries to fill the bounding-box; will expand image size;

background-color: orange; background-blend-mode: darken; this is not well supported; background-repeat:repeat-x More about blending - js Fiddle - note passing css3

background: short cut: background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-color.;

Finding images page 249

• Adobe Stock - some come for "free" with creative cloud
• Google images flourish - Pay attention to Intellectual Property Rights
• http://foter.com 228M photos | http://unsplash.com 10 Free photos/day
• Creative Commons - alternative to copyright - https://www.flickr.com/creativecommons
• Generators: http://www.stripegenerator.com - http://www.colourlovers.com/patterns
• Martha Stewart Paint Palletes - selecting three colors base, trim, highlight;

Mutliple images use background: image1url xPosition yPosition repeat, image2 url...;

padding-top:6em; background:url(images/scroll2Top.png)
center top no-repeat, url(images/scroll2Bottom.png)
center bottom no-repeat, url(images/scroll2Middle.png)
center 100px no-repeat;
background-color:black;
box-sizing:border-box;" pick good image size and make sure you have a good tile for middle;
Order of images matter, they stack so - first is on top. This may not tile well, other imag scollTop.png wrong size.

background: url(images/flourishTopRight.png) right top no-repeat,
url(images/flourishBottomLeft.png) left bottom no-repeat;
background-color: rgba(244,247,255,1.00);
just top and bottom middle is just a color or gradient; Used DW color picker to get exact match.

background-image: gradient function

Basic linear-gradient, seems to be well supported,
historically you would have to use a special function for each rendering engine.
However, modern day Web Design you need to learn how to use an ID.
background-image: linear-gradient( [angle direction], color1 [%], color2, ... colorn );
background-image: repeating-linear-gradient( red, yellow [10%], blue [10%] );
background-image: radial-gradient( [shape size, ] color1 [%], color2 [%] );

width: 90%; background: url(images/flourishTopRight.png) no-repeat right top, linear-gradient( 225deg, rgba(244,247,255,1.00), rgba(244,247,255,1.00), #8E0DE4); bottom angle is 0deg, left side is 90, top is 180, 45 more is the right top corner we repeat the first color a second time, you should make the images exterior more transparent.

Gradient is just a transition from one color to the next
DW CSS Designer is well done in Creative Cloud,
it supports linear gradient in all directions this is 270°.
Most browsers are doing better supporting CSS3 gradient function.