treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

multiple backgrounds

  • arlan
    Permalink to comment #

    hi all,

    i have a div with 5 different background (images and gradient)

    background: -webkit-linear-gradient(0deg, rgba(67, 70, 77, 1), rgba(67, 70, 77, 1)), url('../images/quick-links.gif'), url('../images/quick-links-left-edge-overlay.png'), url('../images/quick-links-right-edge-overlay.png'),
    -webkit-linear-gradient(0deg, rgba(67, 70, 77, 1), rgba(67, 70, 77, 1)), -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

    it works in chrome, first question how to convert (first and fourth bg)

    -webkit-linear-gradient(0deg, rgba(67, 70, 77, 1), rgba(67, 70, 77, 1))

    into just plain color #43464D , when i try to do that or rgb/rgba it doesnt work, maybe there is a different way to encode solid color?

    second question

    i have -webkit- prefix for last bg gradient, how would i add -moz/-o prefixes, if i add

    -moz-linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) -o-linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))

    it breaks everything

    thanks in advance

  • joshuanhibbert
    Permalink to comment #

    1) You have to use this technique:

      linear-gradient(#43464d, #43464d);

    2) You have to separate your prefixes:

      background-image: -webkit-linear-gradient(...);
  background-image:    -moz-linear-gradient(...);
  background-image:         linear-gradient(...);
Add a Comment