# Background Size Published articles for Background Size. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Striped Backgrounds in CSS (Horizontal, Vertical, Diagonal) DevFeed: [Striped Backgrounds in CSS (Horizontal, Vertical, Diagonal)]() Original publisher: [Read original article]() Author: Marko Published: 2026-10-31T09:00:00Z Content type: tutorial Language: en Sources: [Marko Denic Blog]() Topics: [CSS](), [web animation](), [Media Queries]() Tags: [animation](), [background-size](), [css](), [css-gradients](), [examples](), [progress](), [tables](), [tutorial](), [vertical](), [web-development]() ### AI overview CSS stripes use hard color stops in gradients to create sharp edges, with `repeating-linear-gradient()` as the main method. The default direction creates horizontal stripes; `90deg` makes them vertical, and other angles create diagonal stripes. Set stop positions to adjust stripe widths. A tiled `linear-gradient()` with `background-size` also works for horizontal and vertical stripes and makes spacing easy to change, while repeating gradients produce seamless diagonals. The excerpt also shows layering translucent stripes over colors or images, using `:nth-child(even)` for zebra table rows, and animating a striped progress bar by one stripe period; it disables that animation for users who prefer reduced motion. Angled hard edges may appear jagged, and the article suggests a roughly one-pixel blend between colors to smooth them. ### Source excerpt Create striped backgrounds with pure CSS gradients: horizontal, vertical and diagonal stripes, pinstripes, zebra-striped tables and an animated striped progress bar. Copy-paste examples. ## CSS radial-gradient(): Syntax and Examples DevFeed: [CSS radial-gradient(): Syntax and Examples]() Original publisher: [Read original article]() Author: Marko Published: 2026-10-24T09:00:00Z Content type: article Language: en Sources: [Marko Denic Blog]() Topics: [CSS]() Tags: [animate](), [background](), [background-image](), [background-size](), [calc](), [circle](), [color](), [conic-gradient](), [css](), [css-gradients](), [dots](), [examples](), [faq](), [glow](), [gradient](), [gradient-generator](), [pattern](), [position](), [size](), [syntax](), [tutorial](), [web-development]() ### AI overview CSS `radial-gradient()` creates an image whose colors spread outward from a point, usable in `background` or `background-image`. Its default is a centered ellipse reaching the farthest corner; choose `circle` to keep it round, size it with edge-based keywords or lengths, and move its center with `at` plus keywords, percentages, or lengths. Color stops can blend smoothly or share a position for a hard edge; a small gap between hard stops can reduce jagged edges. Examples show layered glows and photo vignettes, repeated dot patterns using `background-size`, and outward rings with `repeating-radial-gradient()`. The article says gradients themselves are not directly animatable, suggesting animation of background position or size, or a registered custom property inside the gradient. ### Source excerpt How CSS radial-gradient() works: circle vs ellipse, size keywords, position, color stops, repeating gradients, and copy-paste examples for glows, spotlights, dot patterns and vignettes. ## Fit height to background pattern size with calc-size() DevFeed: [Fit height to background pattern size with calc-size()]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2026-10-15T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [human computer interaction](), [web graphics]() Tags: [background-size](), [calc](), [css]() ### AI overview A CSS tutorial shows how to align a repeating background pattern with a section's height using calc-size() and round(). It notes that the approach works in Chrome and Edge but is unavailable in Firefox and Safari, and demonstrates rounding the height and padding to multiples of the pattern tile height. ### Source excerpt ## The problem I have a section with a background pattern that repeats on both axes. I wanted the vertical repeat to be aligned with the pattern's height, so the pattern won't have cut-offs. Take the following design. ``` .section { --tile-width: 52px; --tile-height: 44px; background-image: url("pattern.png"); background-size: var(--tile-width) var(--tile-height); } ``` The Espresso Guide Everything you need to pull a great shot at home: picking the right beans, dialing in your grind size. ## Understanding CSS Multiple Backgrounds DevFeed: [Understanding CSS Multiple Backgrounds]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2020-07-22T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Web Development]() Tags: [article](), [background](), [background-attachment](), [background-image](), [background-longhand](), [background-size](), [browser](), [css](), [css-backgrounds](), [css-properties](), [developers](), [examples](), [explainer](), [how-to](), [layer](), [multiple]() ### AI overview A tutorial on CSS multiple backgrounds explains the background shorthand, positioning and sizing layers, and how to combine multiple background layers with visual examples. ### Source excerpt CSS is one of the most used CSS properties. However, using multiple backgrounds is still not well known across all developers. I will hugely focus on the potential of using multiple backgrounds and leverage the CSS to its full power. In this article, I will explain the property in detail, and provide a visual explainer on how we can stack multiple backgrounds, and the actual benefit of it. Of course, there will be some visual examples, you're in for a treat! ## Checkerboard, striped & other background patterns with CSS3 gradients DevFeed: [Checkerboard, striped & other background patterns with CSS3 gradients]() Original publisher: [Read original article]() Author: Lea Verou Published: 2010-12-22T00:00:00Z Content type: article Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [HTML](), [selectors](), [browser]() Tags: [background](), [background-image](), [background-size](), [blog](), [browsers](), [css](), [css-images](), [css-values](), [css3](), [effect](), [fallback](), [gradient](), [linear](), [make](), [mozilla](), [multiple](), [multiple-backgrounds](), [opera](), [original](), [pattern](), [patterns](), [spec](), [stop](), [support](), [syntax](), [tips](), [transparent]() ### AI overview CSS3 gradients can create repeating stripe and picnic-style backgrounds without images by placing color stops at the same position for a sharp transition, setting a background color as both a stripe color and fallback, and using background-size to control the tile. The picnic pattern overlays horizontal and vertical stripes. The described checkerboard instead uses four diagonal gradients, each contributing part of the dark squares; the author says a regular, non-diagonal checkerboard would require too many gradients, and notes conical gradients were not then supported or in the spec. The excerpt lists WebKit, Firefox 3.6+, Opera 11.50+ and IE10+ for the demo. ### Source excerpt You're probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. 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. View demo (Works in Webkit, Firefox 3.6+, Opera 11.50+ and IE10+) The main idea behind the technique is the following, taken from the CSS3 Images spec: 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. In effect, the color suddenly changes at that position rather than smoothly transitioning. 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). For example the gradient for the horizontal stripes is: background-color: #0ae; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); Why transparent instead of the actual colors we want? For flexibility. 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. However, without anything else, the tile will occupy the whole container. To control the size of each tile, you can use background-size: -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; To create the picnic-style pattern, yo