Sample code for using CSS to write a textured gradient background image

The page length in the project is about 2000px or more, and the background image has texture and gradient, so it will be very large and time-consuming to load, so we use CSS to implement it.

The website we mainly used this time is Hero Patterns - a free online texture library

This website has many ready-made backgrounds, and you can also customize the background color, pattern color and transparency.

The background color of the website is a solid color. If we need a gradient background, we can set the background color of the texture to a transparent color, and then set the background image of the parent element to a gradient effect.

html,body{
  background: #000;
  min-width: 1024px; 
  background-image: linear-gradient(to right, #000 -6%, #703ccc, #000 110%);
}

.Diffuse{
    min-width: 1024px;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.61' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    }

Okay, now we are done~

This is the end of this article about using CSS to write sample code for textured gradient background images. For more relevant CSS texture gradient background image content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!