Css

Bon. Ik zit zo’n beetje mijn tanden te breken op volgend probleem: schaalbare achtergrondbeeldjes! Via CSS zorg ik ervoor dat een bepaald block level element een achtergrond image krijgt. Bijvoorbeeld zo:

element {<br> background: url(./img/bg.png) repeat;<br> ...<br> }

De afbeelding heeft – uiteraard – vaste afmetingen. Bijvoorbeeld 800 bij 20 pixels. Op een scherm met resolutie 1600 bij 1200 pixels zal dat er mooi uitzien. Maar o wee wanneer je je scherminstellingen neerhaalt naar 800 bij 600 pixels! In plaats van mooi te schalen, vult het element met de achtergrond opeens het volledige scherm. Andere elementen vallen of lopen weg en de bezoeker krijgt op zijn best een hoop bijeengegooide elementen. Not fun!

* [Blogcom Antwerpen 2006][1] — Fotos van Peter — (tags: [blogcom][2] [blogs][3]) * [Stylegala – Web Design Publication][4] — (tags: [webdev][5] [standards][6]) * [Online CSS Optimiser/Optimizer][7] — This tool is used to optimise CSS code. — (tags: [webdesign][8] [css][9] [webdev][5]) * [XSPF: XML Shareable Playlist Format: Home][10] — (tags: [audio][11] [xml][12] [development][13]) * [XSPF Web Music Player (Flash)][14] — Plays MP3 on your website — (tags: [audio][11] [flash][15] [weblog][16]) * [The Unofficial Monty Python Home Page: Sound Page][17] — (tags: [audio][11] [funny][18] [montypython][19]) * [Andy Budd::An Objective Look at Table Based vs. CSS Based Design][20] — Via veerle.duoh.com — (tags: [CSS][21] [webdesign][8] [standards][6]) * [Stopdesign][22] — (tags: [webdev][5]) [1]: http://flickr.com/photos/pforret/sets/72057594113640515/ [2]: http://del.icio.us/netsensei/blogcom [3]: http://del.icio.us/netsensei/blogs [4]: http://www.stylegala.com/ [5]: http://del.icio.us/netsensei/webdev [6]: http://del.icio.us/netsensei/standards [7]: http://flumpcakes.co.uk/css/optimiser/ [8]: http://del.icio.us/netsensei/webdesign [9]: http://del.icio.us/netsensei/css [10]: http://www.xspf.org/ [11]: http://del.icio.us/netsensei/audio [12]: http://del.icio.us/netsensei/xml [13]: http://del.icio.us/netsensei/development [14]: http://musicplayer.sourceforge.net/ [15]: http://del.icio.us/netsensei/flash [16]: http://del.icio.us/netsensei/weblog [17]: http://www.mwscomp.com/sound.html [18]: http://del.icio.us/netsensei/funny [19]: http://del.icio.us/netsensei/montypython [20]: http://www.andybudd.com/archives/2004/05/an_objective_look_at_table_based_vs_css_based_design/index.php [21]: http://del.icio.us/netsensei/CSS [22]: http://www.stopdesign.com/