Jump to content

Archived

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

Pankaj32

Masthead background image transparent effect

Recommended Posts

Pankaj32

Hello,

Can someone please guide me know how I can achieve a similar effect as seen on homepage of http://www.pagelines.com/ website masthead that has a faded image (laptop and notebook with pen on top) seen in the background see through transparent dark blue canvas.

Thanks!

Share this post


Link to post
Share on other sites
batman

Hi Pankaj32

This is not a dark blue canvas, this is only a blue image

You can see the image

http://www.pagelines.com/wp-content/uploads/2014/03/dt.jpg

 

The canvas select is "Black Background, white text"

I see this with my firefox inspector

http://screencast.com/t/CWOp5oAxO


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Pankaj32

Thanks! Sorry about posting it all over the place. 

Share this post


Link to post
Share on other sites
Danny

Has you issue been resolved ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Pankaj32

 

I think I've actually seen that image out on creative market or so photodune but you can achieve the same effect with any photo.  In Illustrator import your photo, create a rectangle to match shape of photo and apply the color you want to the rectangle.  Then make sure the photo is layered in front of the rectangle.  Change the opacity of the photo to the level that suits you and that should be it.  

 

Optionally, you can have the rectangle in front of the photo and change the opacity of the rectangle.  However, it will be a slightly different effect.

Share this post


Link to post
Share on other sites
Pankaj32

Thanks Danny"] and @[member="jmad for pitching in there. I am returning after a long time to the forum and glad to see that pagelines community is thriving and eager to help folks like myself.  I think I will have to sort this out with some kind of a photo editing tool. All my past attempts at learning CSS haven't been very pleasant. Regards, Pankaj

Share this post


Link to post
Share on other sites
greenfly

We recommend learning as much CSS as you need. It is a great tool and once you learn the basics the rest just falls into place. You dont have to learn anything just the general principles - all the resources you need are out there on the web. Google is your friend :) 

 

I recommend using http://www.codecademy.com/ to learn the basics. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

×