Skip to content

CSS:background

background-size

CSS background-size Preview

background-size속성은 배경이미지의 크기를 지정하는 속성이다.

background-size : x px, y px;
절대 크기로 배경 이미지 적용
background-size : x %, y %;
적용되는 요소의 크기에 비례하여 배경 이미지 적용
background-size : cover;
이미지 크기 비율을 그대로 유지한 상태에서 이미지가 들어 있는 엘리먼트의 가로 또는 세로에 이미지를 맞춘다. (가로와 세로 중 큰 값에 맞춘다)
background-size : contain;
이미지 크기 비율을 그대로 유지한 상태에서 원하는 영역에 전체 이미지가 들어가도록 가장 작은 크기로 이미지 스케일을 조정한다.(가로와 세로 중 큰 값에 맞춘다)
background-size : auto;
auto를 넣으시면 Width나 Height가 비율에 맞추어진다.

애니메이션 Glow 배경 

*{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

다음 내용은 TailwindFlex 사이트 분해해서 배경 HTML 뽑아냄: 

<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