Jump to content


Photo
- - - - -

Background image with "floating" content areas

css style div

  • Please log in to reply
1 reply to this topic

#1 shpr

shpr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 06 February 2013 - 09:33 PM

Hello,

 

I'm hoping I can get some pointers regarding how to create a style something like this: 

Please Login or Register to see this Hidden Content

 (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: 

Please Login or Register to see this Hidden Content

 

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



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 10:15 PM

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:

Please Login or Register to see this Hidden Content

.  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.

Please Login or Register to see this Hidden Content

 

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







Also tagged with one or more of these keywords: css, style, div