# background-image Published articles for background-image. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## 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. ## CSS random() DevFeed: [CSS random()]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2025-10-08T00:00:00Z Content type: article Language: en Sources: [Erik Runyon]() Topics: [CSS](), [Front end](), [Web Development](), [Image]() Tags: [background-image](), [color](), [css](), [image](), [javascript](), [none](), [nth-child](), [random](), [safari](), [selectors](), [text](), [urls](), [use-cases](), [web-development](), [webkit]() ### AI overview Safari's WebKit-only CSS random() function can generate values in numeric or color contexts, but the excerpt says it cannot replace most uses of JavaScript's Math.random(). Its form is random(min, max, step), with an optional step restricting possible values; for example, random(50px, 200px, 50px) yields values in multiples of 50. It cannot currently select elements with selectors such as :nth-child or build strings for URLs, text, or an ::after value. The author's desired uses--choosing a random item from a collection, selecting random images, and displaying a random number for a dice roller--therefore remain unsupported in CSS as described. ### Source excerpt Safari recently implemented a non-standard (yet?) CSS random() function (currently only in WebKit, and not yet part of any CSS specification). Since many recent CSS features are directly aimed at replacing common JavaScript functionality, I expected this function to do the same. While it has some neat use cases, it doesn't cover most of the scenarios where I currently use JavaScript's Math.random(). What it does The basic format of the function follows the pattern "random(min, max, step)". For instance, if you want to assign an element a random height between 50px and 200px, you would use "height: random(50px, 200px)". You can also include a "step" value like so "height: random(50px, 200px, 50px)" where the values will always be a multiple of 50. You can see more examples on the WebKit post "Rolling the Dice with CSS random()" and Frontend Masters "Very Early Playing with random() in CSS". What it doesn't Currently, random() can only be used in numeric or color contexts -- not in selectors or string values like URLs or text content. I have two primary use cases, and one just for fun. All three are marked-up as I would expect to use them if they were supported in the CodePen below. Random items from a collection A common pattern on many Notre Dame sites would be to show a random item from a collection. These could be content such as faculty spotlights, recent publications, or student profiles. We always know how many we're choosing from, and they're always contained to a specific section. So being able to use CSS to show a random child using ":nth-child" would be fantastic. Random images Less common is showing random images. This could be in a feature area on the homepage, or even a decorative background image. This would require the ability to concatenate a string with the random number. Random numbers A "just for fun" feature would be displaying the value from the random() function. My initial thought would be a CSS only dice roller. The demo in the pen would requir ## Day 41: custom properties and url()s DevFeed: [Day 41: custom properties and url()s]() Original publisher: [Read original article]() Author: Manuel Matuzović Published: 2022-11-21T00:00:00Z Content type: tutorial Language: en Sources: [Manuel Matuzović]() Topics: [CSS](), [Web Development](), [properties](), [function]() Tags: [aria](), [background-image](), [css](), [custom-properties](), [function](), [svg]() ### AI overview A CSS tutorial explaining why using a custom property inside an unquoted url() function can produce invalid characters, and showing how to place the url() function inside the custom property instead. ### Source excerpt Let's say you want to swap the background image of an element based on a certain condition, like whether it's pressed, using custom properties. button { --background-image: "/not-pressed.svg"; background: url(var(--background-image)); } button[aria-pressed="true"] { --background-image: "/pressed.svg"; } This looks fine, but it doesn't work because var(--background-image) contains invalid characters. The reason the argument is invalid is that url() works both with quotes url("image.svg") or url('image.svg') and without quotes url(image.svg). By passing a value without quotes you're not passing a string to a CSS function, but you're creating an url-token and this token expects a certain format that requires characters like ( to be escaped. That's a very abbreviated explanation. For details, please read "Why custom properties don't work with the url() CSS function" by the amazing Stefan Judis. To work around that issue, you have to move the url() function into the value of the custom property. button { --background-image: url("/not-pressed.svg"); background: var(--background-image); } button[aria-pressed="true"] { --background-image: url("/pressed.svg"); } My blog doesn't support comments yet, but you can reply via blog@matuzo.at. ## Day 24: the backdrop-filter property DevFeed: [Day 24: the backdrop-filter property]() Original publisher: [Read original article]() Author: Manuel Matuzović Published: 2022-10-27T00:00:00Z Content type: tutorial Language: en Sources: [Manuel Matuzović]() Topics: [CSS](), [dialog]() Tags: [background-image](), [css](), [dialog](), [filter](), [property]() ### AI overview A tutorial explaining the CSS backdrop-filter property, including how it filters the area behind an element or dialog and how it differs from filter. ### Source excerpt The backdrop-filter property allows you to apply CSS filters to the area behind an element. This could be the background of an element or the backdrop of a dialog. In the following example, the parent element has a background image, nothing special about it, but the inner elements all have a backdrop-filter applied which changes how the image beneath them is displayed.
Blur
Invert
Hue
Grayscale
.parent { background-image: url("/images/neue-donau.webp"); } .blur { backdrop-filter: blur(5px); } .invert { backdrop-filter: invert(1); } .hue { backdrop-filter: hue-rotate(260deg); } .grayscale { backdrop-filter: grayscale(100%); } Blur Invert Hue Grayscale Notice how the filters don't affect the text? Yeah, that's the difference between backdrop-filter and filter. They both take the same values, but backdrop-filters only apply to the backdrop/background. In order for this to work the background of the element with the backdrop filter must either be fully or partially transparent. You can also apply the filter to the backdrop of a dialog. dialog::backdrop { backdrop-filter: blur(5px); } yo! close show modal PS: Thanks Kilian for the pointer! My blog doesn't support comments yet, but you can reply via blog@matuzo.at. ## How to set a React Component or dom element as a background image DevFeed: [How to set a React Component or dom element as a background image]() Original publisher: [Read original article]() Published: 2021-08-12T00:00:00Z Content type: tutorial Language: en Sources: [HackerEarth]() Topics: [React]() Tags: [background](), [background-image](), [component](), [element](), [how-to](), [image](), [react](), [react-component](), [set]() ### AI overview The excerpt describes placing a React component behind a textarea to make it appear as the textarea's background. Wrap both in a relatively positioned div, position the component absolutely at the top left, and place it behind the textarea with a negative z-index. Make the textarea background transparent so the component shows through. Because the overlay can interfere with editing, the excerpt says to set pointer-events: none; centering the component is optional. The excerpt ends during the CSS example, so it does not provide complete implementation details. ### Source excerpt During my internship at HackerEarth, I faced an interesting problem. This blog is about that and how I solved it. Problem: To set a background image to the textarea element. My initial impression on seeing the design was that it would be easy. I thought it's a image but after exploring the code I came to know that it's not an image that we have to show as background instead, it's a React Component. So now what? To solve this problem we need to think from scratch. Solution: First, we will think about how to do it and then will implement it step by step. 1. Think From Scratch In this example, as you can see the content in the body element overlap the background-image. To solve this problem we just need to overlap the React Component with the textarea. 2. Implementation Create a textarea and React Component which we are going to use. The text area is to the left and to the right is the React Component which we are going to set as a background image in the textarea element. Steps: 1.Create a div which wrap textarea and React Component. Set the div position: relative and React Component position: absolute, top: 0 & left: 0.
// position: relative