html - background image with tiny picture make gradient -


i'm using background image property 1 image of 1px*2px. idea have black color on left , white on right (1px each), because have picture black on left , white on right.

the result of did there gradient between black , white, don't want because see gradient (gradient bigger picture width)

here code inline quick:

<body>     <div class="header-wrapper" style=     'background-image: url("../images/background.png"); background-repeat: no-repeat; background-size: 100%; padding-bottom: 0px;'>     <div style="text-align:center;">             <div style='display:inline;'><img src="~/images/ban.png"></div>         </div>     </div> </body>

jsfiddle: http://jsfiddle.net/8gksgtdu/2/

i don't want use css gradient browser compatibility, if customer requested compatibility untill ie9 only.

here result have: what got

here want what do

why don't work with gradient?

background-image: linear-gradient(to right, #000 50%, #fff 50%);

demo: jsfiddle


-

Comments

Post a Comment