Home

3 column

CSS 3 column liquid layout with background image stretch

Sat, 2010-05-15 14:30 — John Pfeiffer

CSS keeps improving but sometimes it takes some creativity to meet what might seem like obvious demands: a background image stretched in a column

The following example gives two different methods of background image stretching, though I admit that the background image is just a color gradient and that this kind of stretching on a graphical image (in a liquid layout) could appear at best, "funny".

I created a color gradient and then resized it to be 640x2 pixels, otherwise all of the code is below:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

CSS 3 column liquid layout example

Sat, 2010-05-15 14:14 — John Pfeiffer

CSS is much better than HTML, but making a webpage look the way it ought to look can be very painful, frustrating, and time consuming.

Not only do you have to create cross browser compatible code, but it has to look nice when you're done!

This is just a basic example that you can experiment with and add to later, there are some comments but the code is mostly self explanatory:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><style type="text/css">


/* required to kill off any extra "helpful" browser padding  */
html, body {
Syndicate content