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.

Advertisements

3 thoughts on “Wide Images in CSS Layouts

  1. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s