Archived

This topic is now archived and is closed to further replies.

  • 0

Background image with "floating" content areas


Question

Posted · Report post

Hello,

 

I'm hoping I can get some pointers regarding how to create a style something like this: http://themeforest.net/item/soundboard-a-premium-music-wordpress-theme-/full_screen_preview/2558532 (screenshot below)

 

ie. to be able to set transparency on the various content areas, whilst allowing the background image to be fully visible in the "spacing" areas.

 

A similar example in the Pagelines showcase is: http://www.pagelines.com/exhibit/digital-heavens/

 

Do I apply styles to all the different areas eg. widget-pad, mcolumn-pad, content-pad or is there a different way of accomplishing this?

 

Thanks

 

00000438.png

Share this post


Link to post
Share on other sites

1 answer to this question

Posted · Report post

Hi

 

Setting opacity for various sections is not too difficult, but it should be done on an element by element basis, rather than on a global level, in my opinion, but of course, it depends on what you're trying to do.  

 

Check this link: http://www.w3schools.com/cssref/css_colors_legal.asp.  The example shown under RGBA is what you're looking for.  The 0.5 is the part that sets the opacity.  The lower the value, such as 0.1, the less opaque, whilst 1.0 is fully opaque. Test it here. http://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_rgba

 

Just add the CSS to each particular element you want at Dashboard > PageLines > Site Options > Custom Code.

Share this post


Link to post
Share on other sites