shorthand

background:orange url('https://www.fillmurray.com/100/100') center/cover no-repeat;

longhand

background-image:url('https://www.fillmurray.com/100/100'); background-color: orange; background-position: center; background-repeat: no-repeat; background-size: cover;

shorthand: sized + positioned

background:orange url('https://www.fillmurray.com/100/100') 20px 20px/75px 75px no-repeat;

longhand: sized + positioned

background-image:url('https://www.fillmurray.com/100/100'); background-color: orange; background-position: 20px 20px; background-repeat: no-repeat; background-size: 75px 75px;

shorthand multiple

background: url('https://www.fillmurray.com/50/50') top right no-repeat, url('https://www.fillmurray.com/50/100') bottom left no-repeat, url('https://www.fillmurray.com/250/250') center center no-repeat, red;

longhand multiple

background-image: url('https://www.fillmurray.com/50/50'), url('https://www.fillmurray.com/50/100'), url('https://www.fillmurray.com/250/250'); background-position: top right, bottom left, center center; background-repeat: no-repeat,no-repeat,no-repeat; background-color: red;

shorthand multiple: sized + positioned

background: url('https://www.fillmurray.com/50/50') 100% 100% / 100px 100px no-repeat, url('https://www.fillmurray.com/50/100') right center no-repeat, url('https://www.fillmurray.com/250/250') center center no-repeat, red;

longhand multiple: sized + positioned

background-image: url('https://www.fillmurray.com/50/50'), url('https://www.fillmurray.com/50/100'), url('https://www.fillmurray.com/250/250'); background-position: 100% 100%, right center, center center; background-size:100px 100px, auto, auto; background-repeat: no-repeat,no-repeat,no-repeat; background-color: red;

background attribute on div

<div class="backgroundtest" background="https://www.fillmurray.com/50/50">

background attribute on <div> display:table

<div class="backgroundtest" style="display:table;" background="https://www.fillmurray.com/50/50">

background attribute on <table> tag

<table class="backgroundtest" background="https://www.fillmurray.com/75/75"><tr><td></td></tr></table>

background attribute on <tr> tag

<table class="backgroundtest"><tr background="https://www.fillmurray.com/75/75"><td></td></tr></table>

background attribute on <td> tag

<table class="backgroundtest"><tr><td background="https://www.fillmurray.com/75/75"></td></tr></table>

background-clip: border-box (this is default):

The background extends behind the border.

background-clip: padding-box:

The background extends to the inside edge of the border.

background-clip: content-box:

The background extends to the edge of the content box.

background-origin: padding-box (default):

The background image starts from the upper left corner of the padding edge

background-origin: border-box:

The background image starts from the upper left corner of the border.

background-origin: content-box:

The background image starts from the upper left corner of the content.

background-blend-mode: lighten

background-blend-mode: color-dodge

background-blend-mode: luminosity

background-blend-mode: screen

background-blend-mode: color-burn

background-blend-mode: color

linear gradient (to transparent)

background-image: linear-gradient(to left, transparent, black);

linear gradient (2 colors)

background-image: linear-gradient(black,orange);

linear gradient (3 colors) to right

background-image: linear-gradient(to right, black,orange,purple);

linear gradient (4 colors) to bottom right

background-image: linear-gradient(to bottom right, black,orange,white,purple);

radial gradient (2 colors)

background-image: radial-gradient(black,orange);

radial gradient (3 colors)

background-image: radial-gradient(black,orange,purple);

radial gradient (4 colors)

background-image: radial-gradient(black,orange,white,purple);

radical radial 1

background: radial-gradient( ellipse at center, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 32%, rgba(241,111,92,1) 32%, rgba(246,41,12,1) 51%, rgba(231,56,39,1) 100%);

radical radial 2

background: radial-gradient( ellipse at center, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 51%, rgba(254,254,254,1) 100%);

The native Android Samsung email app app does not recognize background images as a resource At least one html <img> is required in order to trigger the app to download background images.