FORUMS: list search recent posts

CSS Background Images as Borders

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
DavePotts
CSS Background Images as Borders
on Dec 7, 2007 at 9:15:32 pm

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 http://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



Return to posts index

Abraham Chaffin
Re: CSS Background Images as Borders
on Dec 7, 2007 at 9:25:14 pm

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.



Abraham


Return to posts index

DavePotts
Re: CSS Background Images as Borders
on Dec 7, 2007 at 10:29:07 pm

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



Return to posts index


Abraham Chaffin
Re: CSS Background Images as Borders
on Dec 7, 2007 at 10:35:49 pm

You can set it to not repeat and then align it to the bottom right of the div.


<style type="text/css">
<!--
.bottomrightbg {
background-repeat: no-repeat;
background-position: right bottom;
}
-->



Abraham


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]