Catpow SCSS

background image

bg

背景色・背景画像関連のプロパティを設定します。

Params

i
background-image

c
background-color

r
background-repeat

Keyword
  • n
    no-repeat
  • x
    repeat-x
  • y
    repeat-y
  • xy
    repeat
  • r
    round
  • s
    space

a
background-attachment

Keyword
  • f
    fixed
  • s
    scroll

s
background-size

Keyword
  • fit
    100% 100%
  • cnt
    contain
  • cvr
    cover
  • f
    100% 100%
  • c
    cover
  • i
    contain

p
background-position

Keyword
  • l
    left
  • r
    right
  • t
    top
  • b
    bottom
  • c
    center

cl
background-clip

Keyword
  • b
    border-box
  • p
    padding-box
  • c
    content-box
  • t
    text

bm
background-blend-mode

Keyword
  • n
    normal
  • m
    multiply
  • d
    darken
  • s
    screen
  • l
    lighten
  • o
    overlay
  • cd
    color-dodge
  • cb
    color-burn
  • hl
    hard-light
  • sl
    soft-light
  • hue
    hue
  • str
    saturation
  • clr
    color
  • lmn
    luminosity
  • df
    difference
  • ex
    exclusion
scss
@import 'catpow';

@include bg((i:'image/my-bg-pattern.gif',c:tan));
css
background-image: url("image/my-bg-pattern.gif");
background-color: tan;
scss
@import 'catpow';

@include bg((i:'image/my-bg-image.jpg',p:c,s:c,r:n));
css
background-image: url("image/my-bg-image.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
scss
@import 'catpow';

@include bg((g:p tan));
css
background-image: -webkit-linear-gradient(top, tan, tan 50%, transparent 50.1%, transparent);
background-image: -moz-linear-gradient(top, tan, tan 50%, transparent 50.1%, transparent);
background-image: -ms-linear-gradient(top, tan, tan 50%, transparent 50.1%, transparent);
background-image: -o-linear-gradient(top, tan, tan 50%, transparent 50.1%, transparent);
background-image: linear-gradient(0deg, tan, tan 50%, transparent 50.1%, transparent);