tkinin Posted July 15, 2009 Share Posted July 15, 2009 Hi, I want to create a linear gradient background image for my website. The gradient color is Black at both side and white in the center. I tried to create a 1px X 978px image. If the page is longer than this size, the image will repeat but I want image keep expanding when the page longer then 978px. Any suggestion? Thanks! Tkinin Quote Link to comment Share on other sites More sharing options...
Philip Posted July 15, 2009 Share Posted July 15, 2009 Why not just keep the background position fixed, put the bottom pixel of your background image as the background color for the page, and repeat-y? Example css: background: url('bg.jpg') repeat-x fixed #000; Quote Link to comment Share on other sites More sharing options...
tkinin Posted July 15, 2009 Author Share Posted July 15, 2009 Hi, Thanks for your reply. I forgot to mention some other things. My website has 3 sections. The top part for logo and tags. middle part for content. Bottom part for Terms of us...etc. Only the height of middle part will change. What I want is when the height of the middle part change, the white color part of the linear gradient background change also. Quote Link to comment Share on other sites More sharing options...
haku Posted July 15, 2009 Share Posted July 15, 2009 I started to write that I didn't think this could be done, but then I thought about it and decided to test something - and it actually can be done. Here is the code I did it with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #gradiant-top { background:#FFF url(gradiant-top.png) repeat-x top left; border:solid black 1px; } #gradiant-bottom { background:transparent url(gradiant-bottom.png) repeat-x bottom left; min-height:501px; color:blue; } </style> </head> <body> <div id="gradiant-top"> <div id="gradiant-bottom"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non lorem magna, sit amet ultrices nisi. Cras orci tortor, ultrices a bibendum vel, commodo sit amet lorem. Sed et accumsan odio. Praesent dictum blandit dolor ut egestas. Sed ac tortor ipsum. Nunc adipiscing tortor at odio lobortis sodales. Proin sagittis tempor tincidunt. In sodales, nisl porttitor imperdiet dignissim, augue velit sagittis erat, a molestie massa leo in risus. Maecenas sit amet nisi libero. Integer vitae tortor ultrices tellus ullamcorper hendrerit vel at orci. Vivamus dui erat, semper et sodales ornare, viverra nec urna. Aliquam quis arcu sit amet odio dignissim lobortis eu a metus. Ut venenatis nisi ac ante cursus iaculis. Vivamus et purus non mi eleifend iaculis. Fusce egestas nisi eu justo sagittis vitae facilisis lectus placerat. Cras at enim risus. Proin at urna nec mi accumsan rutrum. Phasellus ut ligula vitae justo porta luctus ac vitae metus. Duis rhoncus iaculis dignissim. Proin porta dolor a justo adipiscing quis convallis nisi tristique. Cras vehicula nisl a risus pellentesque malesuada. Praesent rhoncus vehicula blandit. Curabitur laoreet lectus a eros accumsan placerat molestie ante ullamcorper. Vivamus feugiat, purus mollis sollicitudin vehicula, libero velit suscipit lacus, vel posuere risus elit in orci. Cras dictum placerat egestas. Aliquam dignissim dolor eget arcu pretium lacinia. Nulla non libero vitae neque malesuada pellentesque at ut risus. Nulla accumsan, dui eu varius tempus, augue est sodales dui, sed consectetur metus dolor congue quam. Suspendisse nec urna eu purus pellentesque viverra. Curabitur ac erat odio, vel sodales massa. Maecenas congue elementum pharetra. In hac habitasse platea dictumst. Cras ut sem dui. Cras sapien nisl, congue id euismod quis, ultrices luctus velit. In vulputate vehicula mauris vel lobortis. Etiam ultricies scelerisque rutrum. Donec augue nisl, ullamcorper et luctus vel, lobortis at odio. Phasellus dui neque, elementum sed imperdiet a, hendrerit id nibh. Suspendisse potenti. Suspendisse massa leo, cursus quis mollis sed, pharetra at lectus. Morbi vestibulum consectetur orci, vitae dapibus felis eleifend ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eget nibh a ipsum posuere ullamcorper. Aenean vel aliquet velit. Sed id mi erat. Donec auctor, odio sodales adipiscing convallis, orci felis lacinia eros, et pulvinar arcu massa at tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas neque risus, aliquam non tristique nec, dictum a felis. Morbi id leo libero. In accumsan sodales tempus. Curabitur dui ligula, venenatis hendrerit gravida non, dignissim eu nisl. Nullam sit amet mi orci. Pellentesque mauris lorem, sodales id adipiscing nec, placerat in orci. In pellentesque felis ac nisl tempor convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in enim ac nunc imperdiet mollis in in diam. Vestibulum quis enim mi, et lacinia enim. Curabitur lobortis facilisis consequat. Quisque ac nulla non tellus congue pulvinar sed eget dui. Cras lobortis imperdiet nunc sed ultrices. Etiam condimentum, metus sit amet rhoncus egestas, lorem purus vulputate purus, nec varius enim dui et nibh. In pulvinar gravida sapien, eu elementum erat laoreet pretium. Aliquam luctus molestie quam, id blandit tellus laoreet in. Duis lectus tellus, placerat at ullamcorper vel, gravida et nisl. Fusce purus sem, viverra eget condimentum vel, mattis eget neque. Praesent fermentum euismod libero, vehicula tempus tellus rutrum quis. Donec in pulvinar dui. Fusce sit amet dui lectus. Praesent justo tortor, tincidunt vitae fermentum in, rhoncus quis elit. Phasellus in erat neque, ut ultrices magna. Vestibulum nec ligula in metus feugiat faucibus sit amet ac leo. Donec et eros id ligula dapibus sollicitudin. Morbi vel justo aliquet leo blandit ultrices at sed neque. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam et libero sapien. Nullam urna felis, porttitor ac feugiat tristique, sagittis ac libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque suscipit pellentesque. Quisque ut ligula eget nulla pretium eleifend. Aliquam erat volutpat. Nunc iaculis, arcu in tincidunt accumsan, nulla massa pretium dolor, ut lacinia nisi turpis id elit. Suspendisse potenti. Suspendisse vitae orci et diam semper vestibulum et nec neque. Donec lacus tellus, imperdiet at hendrerit non, vulputate sit amet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce condimentum metus vel leo faucibus ultricies non in elit. Integer tincidunt placerat tempus. Nulla nec purus nunc. Aliquam cursus, felis non sollicitudin viverra, dui eros gravida lectus, a interdum ipsum sem a ligula. Proin facilisis massa non massa cursus a placerat elit ullamcorper. Nullam ornare neque in erat dignissim elementum. Mauris egestas leo eu ipsum fermentum pellentesque. In porta tristique turpis et euismod. Nam massa massa, aliquam non fringilla ac, cursus id neque. In purus turpis, placerat vel sollicitudin eget, pulvinar ut orci. Vivamus et tellus ac urna accumsan porttitor nec in augue. Maecenas hendrerit, magna at mattis rutrum, velit magna laoreet orci, sit amet adipiscing libero lacus eget enim. In auctor suscipit ornare. Proin sed diam et libero tristique vehicula a quis metus. In mattis nulla non tortor consectetur dapibus non semper diam. Morbi feugiat posuere dapibus. Duis leo sapien, lacinia ut tincidunt eget, commodo id velit. Pellentesque a nisl libero, eget egestas tortor. Praesent facilisis sem at turpis dignissim quis aliquet sapien lobortis. Aenean sit amet sapien ante, nec luctus purus. Nunc vehicula blandit est. Pellentesque pharetra fermentum consequat. Mauris sit amet tortor justo. Fusce adipiscing adipiscing interdum. Donec dolor eros, porttitor eu tempus non, iaculis non lacus. Aliquam porta leo vel odio tempus convallis. Morbi lorem tellus, feugiat in tincidunt eget, consequat sed ante. Sed volutpat justo vitae urna sollicitudin vitae feugiat sapien ullamcorper. Maecenas posuere aliquam felis vitae interdum. Vivamus nec auctor dui. Proin at tellus vel orci rhoncus luctus eget ut nisl. Ut et sem dolor, at condimentum est. Morbi consequat, tortor a egestas fringilla, lectus leo feugiat tellus, ut ullamcorper turpis velit id tortor. Vestibulum vel dui leo, eu sagittis libero. Mauris et velit nunc. Nam dignissim quam non ipsum scelerisque a faucibus libero porta. Donec volutpat egestas erat malesuada vehicula. Donec sit amet leo orci, quis cursus dui. Quisque gravida tincidunt urna sit amet suscipit. Vestibulum tempor tristique purus ac tincidunt. Cras mollis odio sit amet libero porta ultrices. Sed rutrum dapibus augue ac venenatis. Nulla non viverra risus. Donec turpis ligula, dapibus vestibulum sollicitudin non, mollis id mi. Donec rutrum suscipit eros, ac auctor nulla imperdiet sed. Fusce mi felis, adipiscing sagittis feugiat id, mattis vel nunc. Cras eu massa eu ipsum ultrices porta. Integer varius pharetra iaculis. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sollicitudin posuere mauris sed pulvinar. Donec lacus libero, vestibulum vel pulvinar ut, tincidunt quis leo. Sed vel tortor sed nisl fermentum sagittis. Maecenas eleifend sem et turpis euismod ullamcorper. Praesent hendrerit gravida risus id iaculis. Nulla vel commodo risus. Nulla facilisi. Praesent luctus, odio nec imperdiet viverra, turpis ligula interdum felis, sit amet feugiat mauris odio vitae felis. Mauris vitae magna velit. Pellentesque congue ante non justo commodo quis ultrices urna molestie. Morbi venenatis aliquet justo vitae sagittis. Donec justo sem, ornare quis ullamcorper ut, egestas vitae mauris. Fusce condimentum vulputate nulla et elementum. Curabitur sed blandit orci. Pellentesque vel urna lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed at nunc vel nisl dapibus ultricies. Nam odio est, iaculis non bibendum ac, ornare aliquam metus. Vestibulum mauris nisl, dapibus non ornare iaculis, blandit sit amet odio. Etiam ut sem id purus interdum laoreet. Donec eu lacus sapien. Integer condimentum orci quis eros egestas sagittis. Phasellus vel arcu quis ipsum volutpat pretium nec eu nibh. Vestibulum fermentum leo et odio aliquam sit amet euismod nunc sodales. Mauris aliquet imperdiet tortor in ultrices. Mauris imperdiet nunc ut arcu consequat vel porta turpis faucibus. Nunc vitae leo lectus. In ipsum purus, suscipit eget vulputate sit amet, euismod nec mi. Quisque auctor pharetra blandit. In ac augue sed eros pretium scelerisque. Fusce ultrices mauris vitae turpis suscipit sodales mollis nunc suscipit. Integer blandit purus sit amet felis dapibus id malesuada urna luctus. Nullam convallis sagittis mauris, at porttitor dolor sodales quis. Vestibulum dapibus posuere felis quis pharetra. Ut a magna sed nulla venenatis consequat sed in est. </p> </div> </div> </body> </html> And I'm attaching the two images I used for this. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.