EvoBloggito

Creating a Faux Double Background with Absolute and Relative Position

Author: Ray Gulick; Published: Dec 21, 2009; Category: CSS, Design/Development; Tags: CSS, Design/Development; 6 Comments

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:

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»

Related Posts

Keeping Safari (and Chrome) Hacks Out of Your Stylesheets

Web Designer, Web Developer: What’s the Difference?

The Optimal Line Length Principle Applied to Web Design

Free XHTML/CSS Template for Use with Photoshop 4-Column Grids

Oops! There Goes Another Accessibility Mistake

6 Responses to “Creating a Faux Double Background with Absolute and Relative Position”

1. Olli - just another Webdesigner ;) says:

   March 28, 2010 at 11:17 pm

   Thanks for that trick. When used in a position:relative container, it will work very well.
   Good explained text!
2. Ray Gulick says:

   January 1, 2010 at 5:33 pm

   Wendy -
   Haven’t tried that. Suspect the answer has to do with two variables: the width of the graphic, and positioning the right side of the graphic at 50%.
   Ray
3. WendyH says:

   January 1, 2010 at 3:18 pm

   Just found this in my struggle to figure out a way to add a bg img positioned relative to the page’s center div (margin: 0 auto), so that it will stick to the left side of the center div no matter how wide or narrow the moniter is.

   I see your bg img position moves a tiny bit relative to the div. Can you suggest any way to do what I need to do? Am going a bit crazy!!!

   Thanks for any ideas at all…
   Cheers!
4. Michael says:

   December 25, 2009 at 1:21 pm

   Very nice trick. Added to my linklist
5. Samoo says:

   December 23, 2009 at 4:24 am

   Nice trick!
6. Enlaces interesantes (2) | Cosas sencillas says:

   December 22, 2009 at 6:49 am

   [...] Creating a Faux Double Background with Absolute and Relative Position (evowebdev). Se trata de un caso práctico que su autor tubo que solucionar, con la necesidad de dos imágenes de fondo en una página que se le pidió que creara para mostrar la tarjeta de Navidad en línea de un client. El fondo requiere una mezcla, fácil de hacer con una imagen de gradiente vertical. Además de eso, otra imagen de fondo iba a aparecer parcialmente ocultas detrás de un div horizontal centrado con una película de Flash. Además, la imagen de fondo segundo tuvo que ajustar la posición de la ventana del navegador se hizo más estrecha o más amplia.Pero mejor que veas el efecto en la demo y me deje de explicar lo inexplicable. En el artículo tienes toda la codificación perfectamente detallada, y la puedes descargar. [...]