homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

background image flow transparently over margins?

Msg#: 4198236 posted 6:49 am on Sep 8, 2010 (gmt 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!



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4198236 posted 1:38 pm on Sep 12, 2010 (gmt 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.


Msg#: 4198236 posted 7:12 am on Sep 16, 2010 (gmt 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.


5+ Year Member

Msg#: 4198236 posted 8:13 am on Sep 16, 2010 (gmt 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)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved