- Ruthsarian :
- Layouts :
- Labs :
- Blog :
- Contact :
August 12, 2005
Wide Images in CSS Layouts
Here's a little piece I've written discussing a technique for including wide images inside fluid CSS layouts.
At the heart of the issue is the effect of images that become too wide to fit inside their containing element when the user's browser window is sized too small.
The trick is to simply apply the image as a background image to a DIV element. The DIV will take up whatever width is available and the background image will be cropped to fit whatever space is available.
I kind of lost my energy towards the end of writing this. I'm by no means a professional writer (surely by now you've found more than a few grammatical and spelling errors in the things I've written) and I never proof-read enough. I'm more stream-of-consciousness when I write and that leads to some crazy mistakes. But I also like that approach. Sometimes I'll talk myself into a solution or new idea while typing up these write-ups on CSS-related topics. So it's great for me because it's not just writing, it's something of an exploration. But you guys just get stuck with my crappy writing, spelling and grammar. Those of you who do not have English as your primary language must have an especially difficult time.
Oh well. No worries.
I've done similar things.
I have a website where a big background image (actually a div inb the back) resizes itself to always fit in the page:
http://www.strangetales.net/
and I use the TD background image trick to show a scrolling panorama at
http://www.strangetales.net/pan.html
Don't know much about css standards, though. I just keep hacking at it until it works in firefox and IE. The panorama doesn't work in opera, but that has to do with the events not sticking to two functions correctly at the same time. I prefer to think that it is an opera shortcoming rather than my own problem.
Old netscape, opera, konquerer, and webtv browsers are all hovering at 1% or less of my hits and I have abandoned trying to support them.
Posted by: Keith Graham at August 16, 2005 11:45 AMI had the same problem but with a table that was too wide to fit in contentColum. The layout was breaking very badly on IE and unacceptable on FF.
The solution I found is explained in detail on my blog: http://www.isarie.com/index.php?p=42
Hope this helps. Thank you for your work!
Posted by: Stefan Isarie at September 10, 2005 11:16 AMI had the same problem but with a table that was too wide to fit in contentColum. The layout was breaking very badly on IE and unacceptable on FF.
The solution I found is explained in detail on my blog: http://www.isarie.com/index.php?p=42
Hope this helps. Thank you for your work!
Posted by: Stefan Isarie at September 11, 2005 01:22 AMWe would be honored if we could be added to this great blog. We are from http://www.worldbusinessforsale.com/
Posted by: Sale at January 30, 2006 06:46 PMPost a comment