-
CSS Background Images as Borders
I was checking out msnbc.com this morning and I really like the micro beveled column borders that they have. It looks like they’ve used a tall 1 or 2 px wide image (I’ve posted it at https://video.uncc.edu/graphics/utility/v2/grid-border-fade.gif) as a non repeating background image in their divs, which seems simple enough. What I can’t figure out is that the image seems to stretch or shrink to fit the height of the column instead of repeating itself. Am I looking at this right, or is there something I’m missing? Any help on how to pull this off would be appreciated.
Thanks!
Dave Potts
Broadcast Communications
University of North Carolina @ Charlotte -
3 Replies
-
I would assume they are vertical aligning the background image to the bottom so that the fade always happens from lightest at the bottom to solid at the top – then you can have a background color with the same color as the top of the graphic to fill in where the background no longer repeats.
-
I hadn’t thought of aligning the image to the bottom, that helps point me in the right direction I think. I’m not sure I understand how you would have that background color not stretch all the way across the div though. I’ve heard CSS3 will support multiple BG images…
Dave Potts
Broadcast Communications
University of North Carolina @ Charlotte -
You can set it to not repeat and then align it to the bottom right of the div.
<style type="text/css">
Reply to this Discussion! Login or Sign Up