I want to set background on my website like the one one tailwindcss.com. How can I accomplish this?
Still wondering how is this implemented.
CodePudding user response：
Having inspected the Tailwind website for you, it appears they use a simple JPG image as the header background. Since it's not SVG, I can't know how it was made.
CodePudding user response：
Another way to do this, a different approach to @Gugalcrom123's, is to use a css gradient.
Method 1. You can use a website such as this: https://cssgradient.io/ to come up with the gradient and set that as a background. The website also generates you the code you can use to set it as the background, as well as a regular color fallback in case your browser does not support it. This is where Tailwind probably decided to use method 2.
Method 2. You can use GIMP, Photoshop or some similar drawing tool to draw a gradient, and put it as an image. You can also use Filter: blur() on the img in css to blur it with pixels or even use your drawing tool to blur it out! To make the grid, you can do a similar thing, except after drawing the grid, put it behind the gradient layer and set the gradient layer's opacity to something lower than 100%, so the grid shows behind it.