css - manipulating repeat linear gradient -
i want recreate line pattern similar uber's brand website: https://brand.uber.com/ - in particular repeating lines can see in background: http://prntscr.com/etius6
to so, thought of using repeating-linear-gradient css.
.container { background-image: repeating-linear-gradient(90deg, #d8d8d8, #d8d8d8 1px, white 0, white 16.666666667%); min-height: 5000px; max-width:904px; margin:0 auto; }
<div class="container"> </div>
it works want tweak bit. want eliminate first bar, try makes gradient disappear or weirdly becomes thinner, leaving bars now.. background-position
has no effects well.
any great, thanks
if inner div not problem, hiding left grey line behind , outer div overflow:hidden works:
.container .inner { background-image: repeating-linear-gradient(90deg, #d8d8d8, #d8d8d8 1px, white 0, white 20%); min-height: 5000px; margin-left: -1px; } .container { max-width: 904px; margin:0 auto; overflow: hidden; } <div class="container"><div class="inner"></div></div>
Comments
Post a Comment