Creating a Faux Double Background with Absolute and Relative Position

Recently, I had a need for two background images on a page I was asked to create to display a client’s online Christmas card. The background required a blend, easily made with a vertical gradient image. On top of that, another background image was to appear partially hidden behind a horizontally centered div that held a Flash movie. Further, the second background image had to adjust position as the browser window was made narrower or wider.

First, I Googled "two background images CSS." The solutions I found were complicated, or the background images didn’t move, or making them work with all browsers (I’m looking at you, IE6 and IE7) required some hacks. I’m not completely above using hacks, but I’d rather avoid them if possible.

Then I remembered that absolute and relative positioning create some interesting effects in layering elements. By specifying the second "background" image with absolute position, and applying a percentage on the right, I was able to make the image slide across the screen as the browser window was made narrower or wider. Applying relative position to subsequent elements allows them to appear "on top" of the image. See the demo here.

For the demo, the original client info has been replaced with Evo info (to protect the innocent, and because this is my blog post, so there!). Also, the content div does not include a Flash movie, and the div is transparent so the partially hidden image can be seen in full.

Here is the basic page structure as rendered by the CSS, numbered in the order in which the elements appear on the page:

page structure

Following is the CSS (classes important for the faux background effect are bolded):

* { margin:0; padding:0; }

body { font-family:helvetica,arial,sans-serif; background:#ccc url(images/bkgrd.jpg) 0 0 repeat-x; text-align:center; color:#777; }

.background2 { position:absolute; top:0; right:65%; }

.logo { width:740px; text-align:left; margin:0 auto; position:relative; }

.content { width:740px; height:370px; margin:0 auto; position:relative; background:#555; filter:alpha(opacity=60); -moz-opacity:.6; opacity:.6; }

.content p { color:#fff; padding:80px 80px 0 80px; line-height:150%; }

.links { width:740px;  text-align:left; margin:0 auto; position:relative; }

.links p.left { float:left; display:inline; font-size:11px; letter-spacing:.1em; padding:18px 0; }

.links p.right { float:right; display:inline; font-size:11px; letter-spacing:.1em; padding:18px 0; }

a { text-decoration:none; border:none; }

a:link, a:visited { color:#777; }

a:hover { color:#000; }

.content a:link, .content a:visited { color:#ccc; }

.content a:hover { color:#000; }

Download the files»

Link to original post

Avatar

Leave a Reply

Creating a Faux Double Background with Absolute and Relative Position

Recently, I had a need for two background images on a page I was asked to create to display a client’s online Christmas card. The background required a blend, easily made with a vertical gradient image. On top of that, another background image was to appear partially hidden behind a horizontally centered div that held a Flash movie. Further, the second background image had to adjust position as the browser window was made narrower or wider.

First, I Googled “two background images CSS.” The solutions I found were complicated, or the background images didn’t move, or making them work with all browsers (I’m looking at you, IE6 and IE7) required some hacks. I’m not completely above using hacks, but I’d rather avoid them if possible.

Then I remembered that absolute and relative positioning create some interesting effects in layering elements. By specifying the second “background” image with absolute position, and applying a percentage on the right, I was able to make the image slide across the screen as the browser window was made narrower or wider. Applying relative position to subsequent elements allows them to appear “on top” of the image. See the demo here.

For the demo, the original client info has been replaced with Evo info (to protect the innocent, and because this is my blog post, so there!). Also, the content div does not include a Flash movie, and the div is transparent so the partially hidden image can be seen in full.

Here is the basic page structure as rendered by the CSS, numbered in the order in which the elements appear on the page:

page structure

Following is the CSS (classes important for the faux background effect are bolded):

* { margin:0; padding:0; }

body { font-family:helvetica,arial,sans-serif; background:#ccc url(images/bkgrd.jpg) 0 0 repeat-x; text-align:center; color:#777; }

.background2 { position:absolute; top:0; right:65%; }

.logo { width:740px; text-align:left; margin:0 auto; position:relative; }

.content { width:740px; height:370px; margin:0 auto; position:relative; background:#555; filter:alpha(opacity=60); -moz-opacity:.6; opacity:.6; }

.content p { color:#fff; padding:80px 80px 0 80px; line-height:150%; }

.links { width:740px;  text-align:left; margin:0 auto; position:relative; }

.links p.left { float:left; display:inline; font-size:11px; letter-spacing:.1em; padding:18px 0; }

.links p.right { float:right; display:inline; font-size:11px; letter-spacing:.1em; padding:18px 0; }

a { text-decoration:none; border:none; }

a:link, a:visited { color:#777; }

a:hover { color:#000; }

.content a:link, .content a:visited { color:#ccc; }

.content a:hover { color:#000; }

Download the files»

Link to original post

Avatar

Uncategorized

Leave a Reply