7 replies [Last post]
iAndrew
iAndrew's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT-7
Joined: 2013-08-09
Posts: 10
Points: 12

Hello Forum!

I'm currently developing a website for a customer and have a question. This website, http://whiteboard.is/, has parallax scrolling and a white CSS see through background for the text content. I'd like to mimic the section titled Our Pathway in terms of the white background (you'll have to scroll down a bit to see the section) . Not concerned about how the text content is laid out, more about how do I design / program the white see through background?

I also attached a screen shot of the section for you to reference.

Thanks for the help in advance!

AttachmentSize
Screen Shot 2013-08-08 at 5.47.48 PM.png327.94 KB
iAndrew
iAndrew's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT-7
Joined: 2013-08-09
Posts: 10
Points: 12

Forgot to mention that the

Forgot to mention that the theme, Central, I'm working on is in WordPress 3.6. Thanks! Here is a link to a demo site of Central, http://themeforest.net/item/central-versatile-multipurpose-wordpress-theme/full_screen_preview/4798696

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi iAndrew, You should look

Hi iAndrew,
You should look into using opacity or rgba.
The difference between the two is that opacity will make anything within the container transparent where rgba() can be used to specify a transparent colour like a background-color.
There's an example you can play with here background-color

iAndrew
iAndrew's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT-7
Joined: 2013-08-09
Posts: 10
Points: 12

Thanks Tony I'll take a look

Thanks Tony I'll take a look at the example you provided and let you know how it goes. Thanks!!

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 40 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

layered divs

You will also have to create layered div to achieve the exact effect.

iAndrew
iAndrew's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT-7
Joined: 2013-08-09
Posts: 10
Points: 12

Thanks again that really

Thanks again that really helped! One last question, how would I make the white transparent box full width? Like this example, http://whiteboard.is/ the Our Pathway section of the website (you'll have to scroll down a bit.)

Thank you!! Much appreciated!!

iAndrew
iAndrew's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT-7
Joined: 2013-08-09
Posts: 10
Points: 12

Full Width White Transparent Box

Bump.

iAndrew
iAndrew's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT-7
Joined: 2013-08-09
Posts: 10
Points: 12

Please close ticket. Thanks!

Please close ticket. Thanks!