Jump to content
Sign in to follow this  
philhiom

Setting Page Background to be 20% Translucent

Recommended Posts

philhiom

I am trying to have my background image shine thru slightly on the pages. I still want the pages to be black in color but I want a slight hint of the image from behind to show thru. Is there a way to do this?

Share this post


Link to post
Share on other sites
Rob
May we have a link to your site?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
philhiom
Hey Rangelone, I accepted your comment not meaning it was an answer. How do I change this back to unanswered? Thanks.

Share this post


Link to post
Share on other sites
Rob
I fixed it for you by rejecting one of your replies. You are using a black canvas and that will usually override any background. The canvas actually sits as a layer over any background. Your background image can be made semi-transparent using a graphics editor. However, looking at your image it's huge. Actually, in inches, it's over 56" wide. Rescale that so that it maxes at about 19". Keep in mind, the size of your image is not merely inches, pixels or millimeters, but also in KiloBytes. Each time a visitor loads your page that image will take time to load. And a big file, such as the background I saw on your site could actually crash the site if it becomes popular. In Dashboard > PlatformPro > Design Control, you should consider using Full Width Design Framework rather than Full Width Design With Canvas. Make the background color black, then apply a background image that is semi transparent, like this, set at 40% transparency. [img]http://www.epicurus.com/wp-content/uploads/2011/12/testtransp.png[/img] The background color should show through the transparency, giving you the desired effect. Make your background settings tile; set the vertical position to 0 and the horizontal to 50. That image above, for example, is 21.75 x 14.5 inches, which should be more than enough to cover any large scale monitor. PageLines Framework 2.0 has a new feature to stretch the image to fit any screen which is unique and incredibly helpful.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
By the way, you can see in the image above the white background of the forum canvas showing through, giving it a kind of foggy look. When you place that over black, it will make the view look almost like twilight.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Dominik
I Think this is what you are searching for. in body #page change the backgroundcode to: background: rgba(0, 0, 0, 0.8); so you get someting like this. body #page, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even, .alt #commentform textarea { background: rgba(0, 0, 0, 0.80); } and please take a smaler background picture!!! for browser compatibility you have to watch this infos http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Share this post


Link to post
Share on other sites
philhiom
Thanks so much for your help. I have put a new picture in that is smaller in size. I am still not sure what picture we will end up with but at least for now this works. Thanks again.

Share this post


Link to post
Share on other sites
Rob
No prob. Glad it helped. You can always use your original to create new ones, resize it and follow Monster's suggestion which was brilliant. Please be sure to accept and thank him.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
Oops. You already beat me to that. Thanks!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×