no-repeat background image and gradient same time

Question

How to use no-repeat background image and gradient same time

// this only show some gradient
background-image: url('../../imgs/0/cart.png') no-repeat left center,-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Saf4+, Chrome */

//This is ok
background-image: url('../../imgs/0/cart.png'),-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Saf4+, Chrome */

`background-repeat:no-repeat;` – Aguardientico Jul 02 '13 at 03:44 — Aguardientico, Jul 02 '13 at 03:44

score 1 · Answer 1 · answered Jul 02 '13 at 08:58

"url('../../imgs/0/cart.png') no-repeat left center" is not a valid value of background-image property. It's a valid value of background shorthand.

There are two ways to specify multiple backgrounds in CSS: as a list of shorthand properties, like

    background: url('http://placekitten.com/256/150') no-repeat left center, linear-gradient(to bottom, rgba(238,238,238,1), rgba(204,204,204,1)) no-repeat;

or like separate list of each sub-property values, like

    background-image: url('http://placekitten.com/256/150'), -webkit-gradient(linear, 0 100%, 0 0, from(rgba(238,238,238,1)), to(rgba(204,204,204,1)));
    background-image: url('http://placekitten.com/256/150'), -webkit-linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1));
    background-image: url('http://placekitten.com/256/150'), linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1));
    background-repeat: no-repeat, no-repeat;
    background-position: left center, left top;
    background-size: auto, 100% 100%;

I'd suggest the latter one because it doesn't require to duplicate background-repeat etc. values for all prefixed versions of gradient.

score -1 · Answer 2 · answered Jul 02 '13 at 08:41

you need to set same amount of values to each imge/gradient you set in BG. http://codepen.io/gcyrillus/pen/jfiyz

html {
  height:100%;
}
body {
  min-height:100%;
}
html  {
  background:#555;
  text-align:center;
  background:
    linear-gradient(-40deg,#222,transparent,#111) center repeat, 
    linear-gradient(40deg,#222,transparent,#111) center repeat, 
    linear-gradient(-40deg,#222,transparent,#111) center repeat, 
    linear-gradient(40deg,#222,transparent,#111) center repeat ,
    url(http://lorempixel.com/500/500/abstract/2)  center repeat
    ;
  background-size:95% 85%;
  background-position:center;
}

no-repeat background image and gradient same time

2 Answers2

Linked