How to make a striped background for site items on a clean CSS

Pure color (monotonous, homogeneous) is not found in nature. You could say it’s unnatural. After all, on the green sheet of the tree you can always see veins of another color, on the clear blue sky there is a haze from the clouds. Even a fence or wall painted with paint of the same color receive shades due to the roughness of the surface and the quality of painting.

Not for nothing webmasters for their sites use backgrounds with imitation of paper, fabric or stone. Such decorations make the overall picture more familiar to the eyes. This can cause more confidence in the visitor (the beautiful picture to look always nice), will keep it on the site, which will eventually positively affect behavioral factors.

Background images for the site

Most often, background images are used to decorate the site. The main requirement for them is the safety and size. If the picture is seamless, it can be used as a small sprite, such as 100 per 100 pixels, and cover the entire screen area, with the overall image looking like one single whole with no visible boundaries inside.

Background images on CSS

CsS (cascading style table) allows you to generate simple images (stripes, circles, squares). This can be used to form a background for objects on the site. The advantage of this method is that you do not need a graphic editor to design the background and the size of such a background is minimal.

The disadvantages include the impossibility or very large complexity to create backgrounds in the form of real objects, inscriptions, photos, etc.

Striped background on CSS

Let’s move from words to deeds, make against the background diagonal stripes using the CSS function:repeating-linear-gradient()

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

If you apply this property to the DIVblock, it looks something like this:

DIV block with striped background on CSS

Let’s take a closer look at all the options.

Как сделать полосатый фон для элементов сайта на чистом CSS

  1. 45deg is the angle of the stripes
  2. #606dbc is the initial color of the gradient
  3. #606dbc 10px – color at 10 pixels
  4. #465298 10px – color at 10 pixels
  5. #465298 20px – 20 pixels colour

As you can see, we’ve got three segments: from the beginning to 10 pixels, a 10-pixel segment, where the color changes and the third segment is 10 to 20 pixels.

In my example, there is no gradient (smooth color change), because the color at the beginning and end of the segments is the same. And we use the function for alternating colors.repeating-linear-gradient()

What angles of inclination can be used

Changing the angle of inclination you can get horizontal and vertical stripes. As a tilt angle, you can use predetermined constants to right, to bottom, to bottom left.

 

background: repeating-linear-gradient(
  to right,
  #f6ba52,
  #f6ba52 10px,
  #ffd180 10px,
  #ffd180 20px
);
Блок DIV с вертикальными полосами на CSS

What colors can you use?

You can use all colors that meet CSS standards, as well as transparent color.

Put strips on the following image (taken from the Mozilla website – https://mdn.mozillademos.org/files/15525/critters.png):

jessicachu

Leave a Reply

Your email address will not be published. Required fields are marked *