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

Posted by Japneet Singh
Japneet Singh
4,675 Points

Can i use color over my background image

what i want to achieve is that i want my background image below my background color in such a way that my image looks colored coz the image am using is a pattern

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

There are a few ways you can do this:

  • using multiple backgrounds (comma-separated), apply a partially transparent colored gradient over the image
  • place another element with a partially transparent colored background over the existing element
  • use CSS filters (not yet universally supported)
Japneet Singh
Japneet Singh
4,675 Points

i wanted to add solid colors like in this one:

http://instacharity.in/

refer to the about section and look at the background

Karman Lee
Karman Lee
6,388 Points
Karman Lee
Karman Lee
6,388 Points

background: linear-gradient(90deg,orange,transparent 70%), linear-gradient(90deg,green,transparent), orange url("jpg");

try something like this, you might need to tweak the angle and properties. i'm still learning but add two linear gradients. one from left, one from right and the jpg as the bottom element for the background.

Hope this is helpful