Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Pierre Poujade
Pierre Poujade
7,085 Points

Semi transparent background image?

Hi,

I'm wondering if it is possible to define a background-image and set its opacity < 1 so the background-color can been blended with it and alter the color of the otherwise opaque background image?

This is the best I could come up with: http://codepen.io/anon/pen/cHKGA But it uses vw and vh which don't have that much browser support yet and it's still not perfect as you can see the background image doesn't extend all the way and there is still a blue border on the left and bottom.

Could anyone suggest something better? Did I miss something? Thanks!

4 Answers

Jeremy Germenis
Jeremy Germenis
29,854 Points

You could save your image as a .png and set the transparency in the image file and not in CSS.

Richard Feinburg
Richard Feinburg
2,970 Points

Just made a png with a transparent. Here is the code.

body {
  background-image: url(http://s23.postimg.org/wan86x7vb/80perect.png), url('http://images2.layoutsparks.com/1/242309/stuff-random-lines-print.jpg') ;
  background-color: lightblue;
}
Jeremy Germenis
Jeremy Germenis
29,854 Points

Convert your .jpg to a .png with transparency and set the background color in CSS.

Pierre Poujade
Pierre Poujade
7,085 Points

I see, thanks for your answers. I was wondering if it was possible in CSS only but it seems that it's not.

Jeremy Germenis
Jeremy Germenis
29,854 Points

You should have specified it to be CSS.

Try setting an alpha opacity to a div with the image and have the background color set to a parent container. There a few CSS way to accomplish this but you are better off using a png.

Pierre Poujade
Pierre Poujade
7,085 Points

That's fine, I'll use a PNG. Thanks!