Change background size of an element without a background image in CSS

Question

I was trying to change the background size of a png image but the background is not changing since the background-size works only for elements with background-image property.

<Flex overflowX="hidden" justifyContent={"center"}>
  <Image
    backgroundColor={"cyan"}
    backgroundSize="75% 50%"
    src={heroIllustration.src}
    width={{ base: "580px", lg: "897px" }}
    minWidth={{ base: "580px", lg: "897px" }}
    height={{ base: "518px", lg: "795px" }}
    alt=""
  />
</Flex>

I want my cyan background displayed only at the 50% of the image. Is there any trick to do this?

Answer 1

You can have a plain color as a background-image by using linear-gradient.

Here's an example where the background size is 75% width of the element and 50% high.

You can position the background too. This snippet puts it in the center.

.bg {
  width: 70vmin;
  height: 50vmin;
  border: 1px solid red;
  background-image: linear-gradient(cyan, cyan);
  background-size: 75% 50%;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="bg"></div>