Background

Background color

MDN

Value: <color>

Valores
/* Keyword values */
background-color: red;
background-color: indigo;
 
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #11ffee00; /* Fully transparent */
background-color: #11ffeeff; /* Fully opaque */
 
/* RGB value */
background-color: rgb(255, 255, 128); /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
 
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
Valores
/* Keyword values */
background-color: red;
background-color: indigo;
 
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #11ffee00; /* Fully transparent */
background-color: #11ffeeff; /* Fully opaque */
 
/* RGB value */
background-color: rgb(255, 255, 128); /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
 
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

Exemplo:

bg-color
/codes/css/background/bg-color/index.html
<h1>Lorem ipsum dolor</h1>
/codes/css/background/bg-color/index.html
<h1>Lorem ipsum dolor</h1>
/codes/css/background/bg-color/css/style.css
/* light mode */
:root {
  --background-color: #fff;
  --text-color: #000;
}
 
/* dark mode */
html.dark {
  --background-color: #0d1117;
  --text-color: #f7f8f8;
}
 
body {
  background: var(--background-color);
  color: var(--text-color);
}
 
h1 {
  padding: '20px';
}
/codes/css/background/bg-color/css/style.css
/* light mode */
:root {
  --background-color: #fff;
  --text-color: #000;
}
 
/* dark mode */
html.dark {
  --background-color: #0d1117;
  --text-color: #f7f8f8;
}
 
body {
  background: var(--background-color);
  color: var(--text-color);
}
 
h1 {
  padding: '20px';
}

Background Image

MDN

Value: none | <image>

Valores
background-image: url(img/image.jpg);
Valores
background-image: url(img/image.jpg);

Exemplo:

img/hexagonal-pattern.jpg (Origem):

bg-image
/codes/css/background/bg-image/index.html
<h1>Lorem ipsum</h1>
/codes/css/background/bg-image/index.html
<h1>Lorem ipsum</h1>
/codes/css/background/bg-image/css/style.css
html.dark * {
  color: black;
}
 
h1 {
  background-image: url(../img/hexagonal-pattern.jpg);
  padding: 20px;
}
/codes/css/background/bg-image/css/style.css
html.dark * {
  color: black;
}
 
h1 {
  background-image: url(../img/hexagonal-pattern.jpg);
  padding: 20px;
}

Repositório de imagens:

Gradient

Linear Gradient:

bg-image-linear-gradient

Radial Gradient:

bg-image-radial-gradient

Referências:

Multiple backgrounds

MDN

img/image.jpg (Origem)

img/image.jpg

bg-image-multiple
/codes/css/background/bg-image-multiple/index.html
<div class="gradient multiple"></div>
<div class="gradient trendbg"></div>
/codes/css/background/bg-image-multiple/index.html
<div class="gradient multiple"></div>
<div class="gradient trendbg"></div>
/codes/css/background/bg-image-multiple/css/style.css
.gradient {
  width: 200px;
  height: 200px;
  display: inline-block;
}
 
@media (max-width: 640px) {
  .gradient {
    display: block;
    margin: auto;
    margin-bottom: 1rem;
  }
}
 
.multiple {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 10%, transparent),
    url(../img/image.jpg);
  background-size: cover;
}
 
.trendbg {
  background-image: linear-gradient(
      45deg,
      rgba(0, 145, 200, 0.6),
      rgba(1, 193, 120, 0.6)
    ),
    url(../img/image.jpg);
  background-size: cover;
}
/codes/css/background/bg-image-multiple/css/style.css
.gradient {
  width: 200px;
  height: 200px;
  display: inline-block;
}
 
@media (max-width: 640px) {
  .gradient {
    display: block;
    margin: auto;
    margin-bottom: 1rem;
  }
}
 
.multiple {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 10%, transparent),
    url(../img/image.jpg);
  background-size: cover;
}
 
.trendbg {
  background-image: linear-gradient(
      45deg,
      rgba(0, 145, 200, 0.6),
      rgba(1, 193, 120, 0.6)
    ),
    url(../img/image.jpg);
  background-size: cover;
}

Background Repeat

MDN

Value: <repeat-style>

<repeat-style>: repeat | repeat-x | repeat-y | no-repeat

Valores
/* Keyword values */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;
Valores
/* Keyword values */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;

Backaground repeat:

img/pattern.png (Origem):

bg-repeat
/codes/css/background/bg-repeat/css/style.css
body {
  background-image: url(../img/pattern.png);
}
/codes/css/background/bg-repeat/css/style.css
body {
  background-image: url(../img/pattern.png);
}

Backaground no-repeat:

bg-no-repeat
/codes/css/background/bg-no-repeat/css/style.css
body {
  background-image: url(../img/pattern.png);
  background-repeat: no-repeat;
}
/codes/css/background/bg-no-repeat/css/style.css
body {
  background-image: url(../img/pattern.png);
  background-repeat: no-repeat;
}

Referências:

Background Position

MDN

Value: <bg-position>

Valores
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: center right;
 
/* <percentage> values */
background-position: 25% 75%;
 
/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
 
/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
Valores
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: center right;
 
/* <percentage> values */
background-position: 25% 75%;
 
/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
 
/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;

Exemplo:

bg-position
/codes/css/background/bg-position/index.html
<main>
  <p>
    Lorem, ipsum dolor sit
    <a href="https://developer.mozilla.org/en-US/docs/Web">MDN Web Docs</a>
    amet consectetur adipisicing elit
    <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>.
    Pariatur sunt non nobis, cupiditate eius illum. Velit at dicta doloribus
    reiciendis doloremque quidem nam consectetur expedita, qui officia,
    nostrum necessitatibus blanditiis!
  </p>
</main>
/codes/css/background/bg-position/index.html
<main>
  <p>
    Lorem, ipsum dolor sit
    <a href="https://developer.mozilla.org/en-US/docs/Web">MDN Web Docs</a>
    amet consectetur adipisicing elit
    <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>.
    Pariatur sunt non nobis, cupiditate eius illum. Velit at dicta doloribus
    reiciendis doloremque quidem nam consectetur expedita, qui officia,
    nostrum necessitatibus blanditiis!
  </p>
</main>
/codes/css/background/bg-position/css/style.css
html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 1.6;
}
 
a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}
 
a:focus, a:hover {
  text-decoration: underline;
}
 
a[href*="http"] {
  background-image: url('../img/external-link.svg');
  background-repeat: no-repeat;
  background-position: 100% .05rem;
  background-size: .9rem;
  padding-right: 1rem;
}
/codes/css/background/bg-position/css/style.css
html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 1.6;
}
 
a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}
 
a:focus, a:hover {
  text-decoration: underline;
}
 
a[href*="http"] {
  background-image: url('../img/external-link.svg');
  background-repeat: no-repeat;
  background-position: 100% .05rem;
  background-size: .9rem;
  padding-right: 1rem;
}

Referências:

Background Size

MDN

Value: contain | cover | auto | <length> | <percentage>

Valores
/* Keyword values */
background-size: cover;
background-size: contain;
 
/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
 
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
 
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
Valores
/* Keyword values */
background-size: cover;
background-size: contain;
 
/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
 
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
 
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

Exemplo:

img/image.jpg:

bg-size

Sprite:

sprite
/codes/css/background/sprite/index.html
<div class="google"></div>
/codes/css/background/sprite/index.html
<div class="google"></div>
/codes/css/background/sprite/css/style.css
.google {
  background: url(../img/google.png) no-repeat -24px 0;
  width: 116px;
  height: 37px;
}
/codes/css/background/sprite/css/style.css
.google {
  background: url(../img/google.png) no-repeat -24px 0;
  width: 116px;
  height: 37px;
}

Referências:

Background Attachment

MDN

Value: fixed | scrool | local

Valores
/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
Valores
/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

Exemplo:

bg-attachment
/codes/css/background/bg-attachment/index.html
<header>
  <h1>Lorem Ipsum</h1>
</header>
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est culpa
    facere debitis ex, nobis laborum temporibus! Nemo atque at dolores neque
    aspernatur deserunt omnis praesentium, maiores nobis, repudiandae rem
    doloribus!
  </p>
  <p>
    Consequuntur libero accusamus explicabo molestiae voluptas soluta
    tenetur sit numquam sint, voluptatum veniam, recusandae dolores quis
    ipsam eaque. Praesentium, asperiores, esse. Illo praesentium ducimus
    dolor unde magnam deleniti, ab dignissimos!
  </p>
  <p>
    Aperiam mollitia voluptatibus rem, possimus, fuga nesciunt quam natus
    tenetur ratione accusamus fugit quas. Quidem laboriosam autem, dicta,
    quis aspernatur rem incidunt ducimus modi praesentium provident ut
    iusto, expedita tempora.
  </p>
  <p>
    Sit temporibus officiis incidunt facere modi quod porro magnam
    repudiandae, id sequi, laudantium, maxime similique debitis cupiditate
    voluptates ab ipsa officia nulla consectetur fuga amet excepturi velit
    dolores reiciendis error.
  </p>
  <p>
    Ullam voluptatem possimus dicta consequatur fuga, repellendus tenetur
    sint commodi eos officia ducimus accusamus velit soluta magni omnis a,
    quaerat tempora expedita natus et. Quam laudantium, voluptate excepturi
    explicabo incidunt!
  </p>
</main>
/codes/css/background/bg-attachment/index.html
<header>
  <h1>Lorem Ipsum</h1>
</header>
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est culpa
    facere debitis ex, nobis laborum temporibus! Nemo atque at dolores neque
    aspernatur deserunt omnis praesentium, maiores nobis, repudiandae rem
    doloribus!
  </p>
  <p>
    Consequuntur libero accusamus explicabo molestiae voluptas soluta
    tenetur sit numquam sint, voluptatum veniam, recusandae dolores quis
    ipsam eaque. Praesentium, asperiores, esse. Illo praesentium ducimus
    dolor unde magnam deleniti, ab dignissimos!
  </p>
  <p>
    Aperiam mollitia voluptatibus rem, possimus, fuga nesciunt quam natus
    tenetur ratione accusamus fugit quas. Quidem laboriosam autem, dicta,
    quis aspernatur rem incidunt ducimus modi praesentium provident ut
    iusto, expedita tempora.
  </p>
  <p>
    Sit temporibus officiis incidunt facere modi quod porro magnam
    repudiandae, id sequi, laudantium, maxime similique debitis cupiditate
    voluptates ab ipsa officia nulla consectetur fuga amet excepturi velit
    dolores reiciendis error.
  </p>
  <p>
    Ullam voluptatem possimus dicta consequatur fuga, repellendus tenetur
    sint commodi eos officia ducimus accusamus velit soluta magni omnis a,
    quaerat tempora expedita natus et. Quam laudantium, voluptate excepturi
    explicabo incidunt!
  </p>
</main>
/codes/css/background/bg-attachment/css/style.css
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}
 
header {
  height: 25vh;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: tomato;
  background-image: url(../img/clock.jpg);
  background-position: 0 -100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background: tomato url(../img/clock.jpg) 0 -100px / cover no-repeat fixed; */
  background-blend-mode: multiply;
}
 
header h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 10px;
  color: #efefef;
  text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb,
    4px 4px 0 #b9b9b9, 5px 5px 0 #aaa, 6px 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1), 1px 1px 3px rgba(0, 0, 0, 0.3),
    3px 3px 5px rgba(0, 0, 0, 0.2), 5px 5px 10px rgba(0, 0, 0, 0.25),
    10px 10px 10px rgba(0, 0, 0, 0.2), 20px 20px 20px rgba(0, 0, 0, 0.15);
  color: #e0eff2;
  text-shadow: 5px 7px 0 #0a0e27, 7px 9px 0 tomato;
}
 
@media (max-width: 640px) {
  .header h1 {
    font-size: 1.5rem;
  }
}
 
main {
  width: 55%;
  margin: 50px auto;
  font-size: 1.1rem;
  line-height: 1.8rem;
}
 
@media (max-width: 640px) {
  main {
    width: 100%;
  }
}
 
main p {
  margin: 1.8rem;
}
/codes/css/background/bg-attachment/css/style.css
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}
 
header {
  height: 25vh;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: tomato;
  background-image: url(../img/clock.jpg);
  background-position: 0 -100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background: tomato url(../img/clock.jpg) 0 -100px / cover no-repeat fixed; */
  background-blend-mode: multiply;
}
 
header h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 10px;
  color: #efefef;
  text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb,
    4px 4px 0 #b9b9b9, 5px 5px 0 #aaa, 6px 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1), 1px 1px 3px rgba(0, 0, 0, 0.3),
    3px 3px 5px rgba(0, 0, 0, 0.2), 5px 5px 10px rgba(0, 0, 0, 0.25),
    10px 10px 10px rgba(0, 0, 0, 0.2), 20px 20px 20px rgba(0, 0, 0, 0.15);
  color: #e0eff2;
  text-shadow: 5px 7px 0 #0a0e27, 7px 9px 0 tomato;
}
 
@media (max-width: 640px) {
  .header h1 {
    font-size: 1.5rem;
  }
}
 
main {
  width: 55%;
  margin: 50px auto;
  font-size: 1.1rem;
  line-height: 1.8rem;
}
 
@media (max-width: 640px) {
  main {
    width: 100%;
  }
}
 
main p {
  margin: 1.8rem;
}

Background Shorthand

MDN

Value: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> > <final-bg-layer> = <background-color> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

Valores
/* Using a <background-color> */
background: green;
 
/* Using a <bg-image> and <repeat-style> */
background: url('test.jpg') repeat-y;
 
/* Using a <box> and <background-color> */
background: border-box red;
 
/* A single image, centered and scaled */
background: no-repeat center/80% url('../img/image.png');
Valores
/* Using a <background-color> */
background: green;
 
/* Using a <bg-image> and <repeat-style> */
background: url('test.jpg') repeat-y;
 
/* Using a <box> and <background-color> */
background: border-box red;
 
/* A single image, centered and scaled */
background: no-repeat center/80% url('../img/image.png');

Código Anterior:

Propriedades do Backaground
header {
  background-color: tomato;
  background-image: url(img/clock.jpg);
  background-position: 0 -100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
Propriedades do Backaground
header {
  background-color: tomato;
  background-image: url(img/clock.jpg);
  background-position: 0 -100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
Backaground Shorthand
header {
  background: tomato url(../img/clock.jpg) 0 -100px / cover no-repeat fixed;
}
Backaground Shorthand
header {
  background: tomato url(../img/clock.jpg) 0 -100px / cover no-repeat fixed;
}

Background Blend Mode

MDN

Value: <blend-mode>

<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Valores
/* One value */
background-blend-mode: normal;
 
/* Two values, one per background */
background-blend-mode: darken, luminosity;
Valores
/* One value */
background-blend-mode: normal;
 
/* Two values, one per background */
background-blend-mode: darken, luminosity;

Exemplo:

bg-blend-mode

Referências:

Filter

MDN

Value: none | [ <filter-function> | <url> ]+

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>

Valores
/* URL to SVG filter */
filter: url('filters.svg#filter-id');
 
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
 
/* Multiple filters */
filter: contrast(175%) brightness(3%);
Valores
/* URL to SVG filter */
filter: url('filters.svg#filter-id');
 
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
 
/* Multiple filters */
filter: contrast(175%) brightness(3%);

Exemplo:

image-filters

Opacity

MDN

Value: <number>

<number> (0..1)

Valores
opacity: 0;
opacity: 0.33;
opacity: 1;
Valores
opacity: 0;
opacity: 0.33;
opacity: 1;

Exemplo:

image-opacity
/codes/css/background/image-opacity/index.html
<img src="img/computer.jpg" alt="" />
/codes/css/background/image-opacity/index.html
<img src="img/computer.jpg" alt="" />
/codes/css/background/image-opacity/css/style.css
img {
  opacity: 0.5;
  width: 100%;
}
 
img:hover {
  opacity: 1;
}
/codes/css/background/image-opacity/css/style.css
img {
  opacity: 0.5;
  width: 100%;
}
 
img:hover {
  opacity: 1;
}

Referências

Editar esta página