PDA

View Full Version : Problem with background image


preeti
12-02-2010, 01:01 PM
www.credibleitsolutions.co.uk (http://www.credibleitsolutions.co.uk)
This site contains an image in background. The problem is that if I increase the length of content, the middle white area don't expand and the text comes on mahroon background. The template is designed in tables. Is there any way so that the image expands alongwith the content? :confused:

jmichae3
12-07-2010, 10:32 AM
not with older versions of IE. one technique I can think of is
- using a white background for the td element of the table that contain the image(s)
- slicing up the images into transparent background png images
- using transparent backgrounds/surroundings for the visible parts of the chunks of images.
- using percentages for the top:20%; CSS of the images for instance
and setting the left:0px or left:100px; depending on the image.
- each image is on its own z-layer, so they can overlap "blank" areas. for example,
<img src="1.png" width="200" height="350" style="z-index:0; position:absolute; top:10%; left:20px;">
<img src="2.png" width="200" height="350" style="z-index:1; position:absolute; top:20%; left:240px;">
<img src="3.png" width="200" height="350" style="z-index:2; position:absolute; top:30%; left:150px;">
<img src="4.png" width="200" height="300" style="z-index:3; position:absolute; top:60%; left:50px;">

drawback: if it gets too squished vertically, the images will visibly overlap.
also, because you are working with the edge of the image, the results may not be exact. try it and see. keep your original images just in case!