# BG Pattern with Top and Bottom Gradients

**URL:** <https://forum.kirupa.com/t/bg-pattern-with-top-and-bottom-gradients/252380>\
**Category:** web dev\
**Created:** [February 19, 2008, 4:54pm UTC](https://forum.kirupa.com/t/bg-pattern-with-top-and-bottom-gradients/252380 "2008-02-19T16:54:17Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nickcherryjiggz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/nickcherryjiggz/32/2107_2.png) [@nickcherryjiggz](https://forum.kirupa.com/u/nickcherryjiggz)\
**Post date:** [February 19, 2008, 4:54pm UTC](https://forum.kirupa.com/t/bg-pattern-with-top-and-bottom-gradients/252380/1 "2008-02-19T16:54:17Z")

</div>

I’m making a full-screen Flash application that I would like to lay over of a patterned background (created with HTML/CSS). Normally, this would be cake, but this time, I want the top row of background tiles to be overlaid with a dark shadow (80-0% transparency gradient), and if it’s not much more difficult, the bottom should also have this type of shadow, only inverted. I’ve created the 3 pngs I expect to be necessary:

bgpatterntop.png (5 x 200px)  
bgpattern.png (5 x 5px)  
bgpatternbottom.png (5 x 200px)

If you lay them on top of one another, the patterns match up. I’m just not sure how to go about doing the top/bottom gradients in HTML/CSS. Any suggestions?