Can I have CSS3 gradients above a background image? Yes you can!

The question above seems a popular one on google so I thought I would share my take since I use a repeating linear gradient over my background image on this very site.

The solution to this problem is a little counter intuitive which is why, I think, some people miss it – it’s all about order!

What comes naturally is to type your declaration as below:

background: #353E49,url(new-tree-background.jpg) 0 0 repeat-y,repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(255,255,255,.1) 6px,rgba(255,255,255,.1) 8px);

You would instinctively start with the background colour, then the image followed by the gradient.

However, this is wrong!

What you should do is order your background properties – top to bottom not bottom to top. So the same rules as above should be written the opposite way:

background: repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(255,255,255,.1) 6px,rgba(255,255,255,.1) 8px), url(new-tree-background.jpg) 0 0 repeat-y, #353E49;

So there you have it an easy fix really and one that opens up a myriad of web designing possibilities.

For more information you can check out the ever helpful Mozilla Developer Network on the topic of Using CSS Gradients.

Happy coding!


Leave a reply