Learn_CSS_CLS2_tryBackground

for Learning book demo use

by Loki Jiang

HTML

<table>
  <tr>
    <td class="a"></td>
    <td class="b"></td>
    <td class="c"></td>
  </tr>
  <tr>
    <td class="d"></td>
    <td class="e"></td>
    <td class="f"></td>
  </tr>
  <tr>
    <td class="g"></td>
    <td class="h"></td>
    <td class="i"></td>
  </tr>
</table>

CSS

body {
  text-align: center;
}
table {
  margin: 1rem;
  display: inline-block;
}
table,
tr,
td {
  border: 1px solid #000;
}
table td {
  width: 200px;
  height: 200px;
}

.a {
  background-color: crimson;
}

.b {
  background: url("https://picsum.photos/50/50/?random=1") center/cover;
  /* background-size: cover; */
}
.c {
  background: url("https://picsum.photos/50/50/?random=1") repeat-x;
  /* background-repeat: repeat-x; */
}
.d {
  background: url("https://picsum.photos/50/50/?random=1") repeat-y;
  /* background-repeat: repeat-y; */
}
.e {
  background: url("https://picsum.photos/50/50/?random=1") no-repeat center center;
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
}
.f {
  background: url("https://picsum.photos/50/50/?random=1") no-repeat center center #ffa;
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
  /* background-color: #ffa; */
}
.g {
  background: 
    url("https://picsum.photos/200/50/?random=1") no-repeat left top,
    url("https://picsum.photos/200/102/?random=1") no-repeat 0 50px,
    url("https://picsum.photos/200/50/?random=1") no-repeat left bottom;
  /*  
  background:
    url("https://picsum.photos/200/50/?random=1"),
    url("https://picsum.photos/200/102/?random=1"),
    url("https://picsum.photos/200/50/?random=1");
  background-position: left top, 0 50px, left bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
  */
}
.h {
  background: linear-gradient(to right, black, blue);
}
.i {
  background: radial-gradient(black, white);
}