Skip to content
Search

CSS:background

lastmod 2024-07-31created 2014-03-1711 edits

background-size

CSS background-size Preview

The background-size property specifies the size of the background image.

background-size : x px, y px;
Applies the background image at an absolute size
background-size : x %, y %;
Applies the background image in proportion to the size of the element it is applied to
background-size : cover;
Keeps the image's aspect ratio and fits the image to the width or height of the element containing it. (Fits to the larger of width and height)
background-size : contain;
Keeps the image's aspect ratio and scales the image to the smallest size at which the whole image fits in the target area. (Fits to the larger of width and height)
background-size : auto;
With auto, the Width or Height is adjusted to keep the ratio.

Animated Glow background 

*{box-sizing: border-box;}

html,
body {
  margin: 0 auto;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  font-family: monospace;
  justify-content: center;
  background-color:darken(#252B37, 4%);
}

@mixin backlight($x, $y, $spread, $size, $colorA, $colorB, $duration) {
  &:after {
    position: absolute;
    content: "";
    top: $y;
    left: $x;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    transform: scale($size);
    -webkit-filter: blur($spread);
    -moz-filter: blur($spread);
    -ms-filter: blur($spread);
    filter: blur($spread);
    background: linear-gradient(270deg, $colorA, $colorB);
    background-size: 200% 200%;
    animation: animateGlow $duration ease infinite;

    @keyframes animateGlow {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
  }
}

div {
  position: relative;
  width: 30vw;
  height: 30vw;
  line-height: 30vw;
  text-align: center;
  color: #252B37;
  background-color: #151823;
  animation: textColor 10s ease infinite;
  @include backlight(0, 5vw, 5vw, 0.75, #0fffc1, #7e0fff, 10s);

  @keyframes textColor {
    0% {
      color: #7e0fff;
    }
    50% {
      color: #0fffc1;
    }
    100% {
      color: #7e0fff;
    }
  }
}

Morphing (Mesh) Gradients Background

The following background HTML was extracted by taking apart the TailwindFlex site: 

<main class="w-full bg-white dark:bg-gray-800">
  <div class="relative">
    <div class="relative dark:bg-transparent mx-auto flex flex-col items-center py-12 sm:py-16">
      <div aria-hidden="true" class="absolute inset-0 top-32 h-max w-full m-auto grid grid-cols-2 gap-20 md:gap-60 opacity-40">
        <div class="blur-[106px] h-56 bg-gradient-to-br from-primary-500 to-purple-400"></div>
        <div class="blur-[106px] h-56 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
      </div>
    </div>
  </div>
</main>

See also

Favorite site

CSS Background Examples

author Zer0 sitemap