3 columns AND resizing background image ??

expatCanuck · #1 07-29-2008, 01:15 PM

Greetings -

There are plenty of templates/sites/tutorials/examples that advise how to create a 3-column site with a header & footer. (e.g. - http://css-discuss.incutio.com/?page=ThreeColumnLayouts)

There are also some sites (tho' considerably fewer) that advise how to have a background image automagically resize according to the size of the browser window. The key seems to be to specify the following bit in the "<div style=" definition:

<img src="myImageHere.jpg" width="100%">

specifying the width, but NOT the height (so that the image height can resize according to the browser window size).

But -- has anyone seen or built a layout which will allow a single resizing background image ACROSS THE ENTIRE PAGE, but also have the 3 columns (ideally percentage-based (say 20/60/20), and ideally with a header & footer)?

If so, can you point me towards an example? -- 'cause that's what I'd really like to do.

Thanks kindly,

- Richard

Yawp · #2 07-30-2008, 09:20 AM

Hi expatcanuck,

If I understand you correctly, you are trying to have a background image fit to 100% of the screen, with three columns over the top.

If that’s the case you need to create a 1x1 table at 100% width and place the background image in that…then nest a 3 column table inside (without a background image). This method is also used to keep the content central on the page.

Hope that helps.

expatCanuck · #3 07-30-2008, 10:10 AM

Yawp -

Thanks. I think that's what I've managed to do here by merging what I found here:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

with what I found here:
http://css-tricks.com/how-to-resizeable-background-image/

and created the following, which is a reasonable start. Not elegant, but workable (at least on IE6 and Firefox2, which are all I have handy right now):

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>blah</title>
<meta name="Author" content="writer" />
<meta name="Keywords" content="whatever" />
<meta name="Description" content="yadda yadda" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:70%; color: white;}
#background{position:absolute; z-index:1; width:100%; }
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:left;}
#layoutdims {
clear:both;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative;/* Fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:95%;/* almost width of whole page (avoid horizontal scrollbar */
overflow:hidden;/* chop off overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;/* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;/* no left or right padding on columns; just made narrower */
/* only top and bottom padding */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
}
.threecol .colmid {
right:25%;/* width of the right column */
}
.threecol .colleft {
right:50%;/* width of the middle column */
}
.threecol .col1 {
width:46%;/* width of center column content (column width minus side padding) */
left:102%;/* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%;/* Width of left column content (column width minus padding on either side) */
left:31%;/* width of (right column) */
/*plus (center column left and right padding) */
/*plus (left column left padding) */
}
.threecol .col3 {
width:21%;/* Width of right column content (column width minus padding on either side) */
left:85%;/* Please make note of the brackets here:*/
/* (100% - left column width) */
/*plus (center column left and right padding)*/
/*plus (left column left and right padding) */
/*plus (right column left padding) */
}
</style>
</head>
<body>
<div>
<img id="background" src="yourImageHere.jpg" alt="" imgTitle="" />
</div>
<div id="scroller">
<div id="content">
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">

<h4>Column 1</h4>
<p>c1 text here</p>
<h4>Meanwhile, back at the ranch ...</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nam fermentum pulvinar nibh. Vivamus eu leo. Sed facilisis,
odio sed mattis sagittis, nunc ante fermentum erat,
at volutpat nisl pede fringilla nisl.</p>
<p>Yadda, yadda, yadda ...</p>

</div>
<div class="col2">

<h4>Column 2 (left)</h4>
<p>c2 text here</p>

</div>
<div class="col3">

<h4>Column 3</h4>
<p>c3 text here</p>

</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>

Cheers.

- Richard

3 columns AND resizing background image ??

Sponsored Links

Advertise Here

Internet Services

Web Development

Digital Marketing

Consumer Tech