#Simple stripe background css how to

The shorthand background property will know what you mean if you declare one or the other. This comes in useful in a few ways which we’ll get into later. While declaring the a solid color uses background-color property in CSS, gradients use background-image. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen.

Using gradients declared in CSS, rather using an actual image file, is better for control and performance. For more details, see this later post.Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. There are far more pattern designs possible with CSS3 gradients than I originally thought. Cheers! :) Added afterwards: Other patterns It will be very easily possible if conical gradients start being supported (currently they’re not even in the spec yet).Ĭan you think of any other popular patterns that can be created with CSS3 and no images? If so, let me know with a comment. I still haven’t managed to think of a way to create a regular checkerboard (not at 45°) without needing an unacceptably large number of gradients. It consists of two 45° linear gradients and two -45° linear gradients, each containing ¼ of the dark squares. The hardest one to figure out was the checkered pattern. To create the picnic-style pattern, you just overlay horizontal stripes on vertical stripes. To control the size of each tile, you can use background-size: However, without anything else, the tile will occupy the whole container. background-color serves two purposes here: Setting the color of half the stripes and serving as a fallback for browsers that don’t support gradients. Why transparent instead of the actual colors we want? For flexibility. It includes various styles and designs that can cater to different website themes and user preferences. Our collection of CSS clouds is diverse and versatile. For example the gradient for the horizontal stripes is:īackground-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255. CSS clouds can be static or animated, and can vary in complexity from simple shapes to intricate, realistic designs.

#Simple stripe background css how to

I guess this makes it obvious how to create the tile for the stripes (unless you’ve never created a striped background before, but teaching you this is beyond the scope of this post). In effect, the color suddenly changes at that position rather than smoothly transitioning. If multiple color-stops have the same position, they produce an infinitesimal transition from the one specified first in the rule to the one specified last. The main idea behind the technique is the following, taken from the CSS3 Images spec: View demo (Works in Webkit, Firefox 3.6+, Opera 11.50+ and IE10+) What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. 22 December 2010 2 min read 0 comments Report broken page