How to Make a Striped Background With CSS
Using Cascading Style Sheet code, you can generate a striped background for an entire Web page without using any graphics. This effect uses CSS level gradients with multiple color stops and the "background-size" property to make the gradient repeat itself across the screen. The best way to do this is to start out with a solid background color and make one of your stripes transparent so the color shows through. When visitors see view your Web page in older browsers, they will see the solid color.
Other People Are Reading
Instructions
-
-
1
Open your CSS style sheet file in Notepad or a code editing program. Add this rule to the bottom of the file:
html {
height: 100%;
}
This rule makes it possible to fill the entire background of a Web page with the stripe gradient you will create.
-
2
Set a background color for your Web page inside "html {}" to provide a base color for your stripes and a fallback for older browsers:
html {
height: 100%;
background-color: black;
}
-
-
3
Add this code to your "html {}" rule to create a horizontal stripe effect:
background-image: linear-gradient(transparent 50%, white 50%);
This code creates two color stops in your gradient, the first transparent and the second white. Each color stop takes up 50 percent of the gradient's space on the screen. Adjust the width of the stripes relative to each other by changing the percentage values.
-
4
Add a zero value in front of the first color stop and separate it from the stops with a comma:
Background-image: linear-gradient(0, transparent 50%, black 50%);
This change will make your stripes vertical instead of horizontal.
-
5
Duplicate your "background-image" property and its values on a new line. Do this twice, so you will end up with three lines of the same code. Add the "-moz" prefix to the linear gradient in one of the duplicated lines of code. Add the "-webkit" prefix to another duplicated line:
background-image: linear-gradient(0, transparent 50%, white 50%);
background-image: -moz-linear-gradient(0, transparent 50%, white 50%);
background-image: -webkit-linear-gradient(0, transparent 50%, white 50%);
-
6
Constrain your gradient to a certain amount of pixels by setting the "background-size" on the next line in your CSS code:
background-size: 20px;
Change the number of pixels in "background-size" to change the size of the gradient. Because the gradient will keep repeating for the width of the page, each repetition of the gradient becomes one set of stripes on the screen.
-
1
Tips & Warnings
Some older browsers do not support CSS3 gradients. When you want to display a striped background for every browser, use conditional comments to include a style sheet with a repeating graphic.
