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!
Be First to Comment