Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Pierre Poujade
Pierre Poujade
7,085 Points
Posted by 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
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
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
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
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
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
Pierre Poujade
Pierre Poujade
7,085 Points

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