Vertically bottom align a linear gradient-CodePudding

I have made a jsfiddle = https://jsfiddle.net/wLomyf65/

HTML:

<div ></div>

CSS:

.skeleton-6euk0cm7tfi:empty {height: 100px; background-color: #ffffff; border-radius: 0px 0px 0px 0px; background-image: linear-gradient( #676b6f 6px, transparent 0 );background-repeat: repeat-y;background-size: 88px 100px;background-position: left 0px bottom 0px;}

I wish to vertically bottom align the linear gradient (so that its in the bottom left corner).

I have used: background-position: left 0px bottom 0px; but this hasn't done it.

CodePudding user response：

A slight problem with the way you are setting things up is that the height of the element itself and the height of the background image (before you have sized it) are the same, and its drawing the gray for 6px from the top (the default direction for a linear-gradient) and the rest is transparent.

This snippet slightly simplifies what is going on.

It 'draws'a background image in the gray color, setting its width to 88% and its height to 6px and its position to bottom left. It sets it to not repeat on either axis.

body {
  background: red;
}

.skeleton-6euk0cm7tfi:empty {
  height: 100px;
  background-color: #ffffff;
  border-radius: 0px 0px 0px 0px;
  background-image: linear-gradient( #676b6f, #676b6f);
  background-repeat: no-repeat;
  background-size: 88px 6px;
  background-position: left bottom;
}

<

<div ></div>