Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

background image flow transparently over margins?

6:49 am on Sep 8, 2010 (gmt 0)

New User

5+ Year Member

joined:Sept 8, 2010
votes: 0

hi there!
any advice on how to allow a background image flow over the margins of a website?
imagine a site with grey vertical bars on either side of a white middle portion. i'd like to allow vines, which are part of the white background image, to flow from the middle portion onto the grey bars.
is there a way to do this? do i need to make the vines into some other element rather than have it be part of the background?
can provide code/image if needed. thank you for your help!
1:38 pm on Sept 12, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 27, 2002
votes: 0

I have used a transparent .png to do this. It allows the other elements to show through. FYI does not work in older browsers.
7:12 am on Sept 16, 2010 (gmt 0)

Full Member

joined:July 31, 2005
posts: 272
votes: 0

You can use PNG/GIF formats that support transparency or you can use the CSS opacity for a jpg which set the whole image to the opacity you set.

CSS Transparency Settings for All Browsers [css-tricks.com]

IE does have a problem with PNG transparency, but there is a JavaScript fix for it. Or, you can download IE 9 Beta [windows.microsoft.com] and use it.
8:13 am on Sept 16, 2010 (gmt 0)

Full Member

5+ Year Member

joined:Dec 30, 2009
votes: 0

Use an rgba (red green blue alpha) background colour for the grey bars like rgba(180,180,180,0.6) if you only care about modern browsers, if you need to cater for IE, use a repeated transparent png background.

What jbinbpt says about transparent png not being supported, it is by all commonly used browsers except IE6 - and there are a couple of scripts that can be used to get support in IE6 fairly simply (though they can be buggy)