Jump to content


Photo

Make Background of Content Area Transparent Without Affecting Content

Background Transparent

  • Please log in to reply
8 replies to this topic

#1 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 01 May 2013 - 11:10 PM

How do i make the background of the content area to be transparent but not affect the content itself. I tried to do it, but it didn't work out... I kept making both the background and content transparent. So how do i make the background transparent?



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 01 May 2013 - 11:34 PM

Hi there,

 

In Platform in the color control tab you'll be able to remove the color in the 'body background color' field. This will remove the background color to the content area and only allow the page background to show through.

 

For more info on the options in this panel, see http://www.pagelines.../design-control



#3 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 02 May 2013 - 01:18 AM

Not exactly what i wanted... I was looking for a way to make the background transparent, so it is still there but just transparent.



#4 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 02 May 2013 - 02:59 AM

Any ideas?



#5 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 May 2013 - 03:05 AM

I'm not really following what you mean, do you mean adjust the opacity on the background, so the white is more see through?

 

Making it transparent will remove the content background color completely, which will give the same affect as removing the color for the content area in the color control tab.



#6 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 02 May 2013 - 03:20 AM

I'm not really following what you mean, do you mean adjust the opacity on the background, so the white is more see through?

 

Correct, that is what i want to do.

 

Making it transparent will remove the content background color completely, which will give the same affect as removing the color for the content area in the color control tab.

 

 

So, then how would i avoid it? I am only planning on making it 10% see through... Would i have to seperate the content from the background?

 

So what  do you think i should do?



#7 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 May 2013 - 03:31 AM

To adjust the opacity of the color for the background you'll need to use some css. First thing to do will remove the content background color completely form the color control tab and from the css you have applies to the .page-canvas area. Then you'll need to add the color into the css as a rgba value. Like below.

 

.page-canvas {
    backgroundnone repeat scroll 0 0 rgba(255, 255, 255, 0.2);}

 

If you're using firebug there's an inbuilt color picker you can use to create the transparency values. I've included a short videocast below to show you the transparency slider in the color picker.

 

http://screencast.com/t/rKJEP0uUL



#8 luminouscomm

luminouscomm

    Newbie

  • Members

  • 1 posts
  • Framework Version:2.0.4
  • Country: Country Flag

Posted 20 April 2014 - 04:17 PM

I was able to set the background transperency after finding this trick but I want to know if there is a way to leave my body opaque as it currently is, but revert the header section back to it's original format. Meaning, I need to know how to make the body of my site opaque but not the header portion. Is that possible? It appears as though the CSS tweak above makes all content opaque. Any advice?



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 April 2014 - 09:47 AM

Can you provide a link to the site in question so we can take a look.