Jump to content
Sign in to follow this  
christianemohr

Give opacity/transparency to canvas/page-main, but have pictures or features still solid

Recommended Posts

christianemohr

Hallo Pagelines Team, I know that there is already one post regarding my problem, but the problem is: the suggested solution does not work. I want to have the "page-main" element with an opacity of 70%, but all the pictures or feature-sliders have to be solid. The picture in the backgroud should stay as it is, but should be seen through the canvas... First I had everything transparent with (then I was working with the page-canvas, but in the meantime I realized, that I need to have the header section solid) the following code: #page .page-canvas {opacity: .8;} After that whatever I tried ended in solid canvas, solid page-main??¦ I hope you can help - many thanks in advance! Regards Christiane

Share this post


Link to post
Share on other sites
catrina

I've come across the conundrum in web design, too, and haven't figured out a way around it. I've been searching for possible solutions, but haven't found any solid ones. I think the easiest way to get what you want is to save a solid background color image with the opacity level you want (as a PNG - not any other format) and set it as the background image for page canvas.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
christianemohr

Thanks Catrina, I found the post from Alex (website threeseeded.com) and he achieved exactly what he wanted (and I want). I already send him a message too, hopefully he might be able to help. But as he seemed to be lost at the time, I figured there might have been another - working solution suggestion - from the team??¦ The solution you're suggesting is dissatisfying when having different page lengths. This is why I'm not (yet) willing to give up??¦

Share this post


Link to post
Share on other sites
catrina

A developer suggested that you create DIV layers for the images so that they do not inherit the opacity attribute of the canvas. Maybe Alex did something similar, but we'd need to know how that technique is implemented and exactly what CSS is being used.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
christianemohr

I'm afraid I'm just coping with basic stuff - I'm sorry, I thought there is an easy way to solve this problem via some CSS-code, then I realized that it is not that easy and spent some time with it??¦ But I don't even know how to create a DIV layer for my pictures - I'm sorry, I suppose this is just out of my league now??¦ ;-)

Share this post


Link to post
Share on other sites
catrina

DIV layers are explained here: http://www.w3schools.com/tags/tag_div.asp. However, working with them will require additional knowledge about CSS in order for them to function the way they want. Even for people who have been using CSS regularly, the opacity issue is still a confusing topic.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
christianemohr

Thanks Catrina, I think I'll leave it with that, at least for the moment??¦

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  

×